Uncaught TypeError: this.state.stock.map is not a function in React

Question

new to react, have seen some of the similar title as below but still could not clarify with the error getting on the console saying Uncaught TypeError: this.state.stock.map is not a function . When I use the similar code in the another api call then there is no such error coming. The code is as below for the same. If I am assigning data from the get method to stock the also its not working and giving the same issue. What is the problem ? a few links that I referred.

Link 1 Link 2

Image after discussion.

var StockData = React.createClass({
      getInitialState: function() {
        return {
            stock: []
        };
      },

      componentDidMount: function() {
        this.serverRequest = $.get(this.props.source, function (data) {
           var old = JSON.stringify(data).replace("//", ""); //convert to JSON string
           var obj = JSON.parse(old);                        //convert back to JSON
           console.log(obj);
           this.setState({
              stock: obj
            });
        }.bind(this));
      },

      componentWillUnmount: function() {
        this.serverRequest.abort();
      },

      render: function() {
        return (
                React.createElement("div",null,
                        React.createElement("ul",null,
                            this.state.stock.map(function (listValue){
                                return React.createElement("li",null,listValue.t,"( ",listValue.e," )-"," Current Price :",listValue.l_cur,"  Date :",listValue.lt
                                );
                            })
                        )
                    )
        );
      }
    });

    ReactDOM.render(React.createElement(StockData, { source: "http://www.google.com/finance/info?q=NSE:ATULAUTO,WIPRO,INFY" }),document.getElementById('proper-list-render3'));

score 0 · Answer 1 · answered Jul 14 '16 at 06:16

0

Replace render function with stored this as self

 render: function() {
        var self = this;
        return (
                React.createElement("div",null,
                        React.createElement("ul",null,
                            self.state.stock.map(function (listValue){
                                return React.createElement("li",null,listValue.t,"( ",listValue.e," )-"," Current Price :",listValue.l_cur,"  Date :",listValue.lt
                                );
                            })
                        )
                    )
        );
      }

answered Jul 14 '16 at 06:16

Piyush.kapoor

6,715
1
21
21

Still the issue persists. – Harshit C. Jul 14 '16 at 06:18
can u console.log(this.state) in the render .I gues this.state.stock might not be array .lets see – Piyush.kapoor Jul 14 '16 at 06:20
check the image attached to the question. – Harshit C. Jul 14 '16 at 06:23
stock is a json strngified string – Piyush.kapoor Jul 14 '16 at 06:27
Server returned json string and in componentDidmount , you stringified it and then parsed it , end result is a string – Piyush.kapoor Jul 14 '16 at 06:28
But i am using JSON.parse and assigning the same to stock, so it should be JSON object. Then need to parse `this.state` to JSON ? – Harshit C. Jul 14 '16 at 06:29
try stock = json.parse(this.state.stock) in the render function and use the stock in loop – Piyush.kapoor Jul 14 '16 at 06:36

score 0 · Answer 2 · answered Jul 14 '16 at 06:46

I finally got the solution to the problem. The data received after calling the url is received in the string format and not JSON. The correct code is as below and now it is working fine. Thanks @Piyush.kapoor for the help.

  componentDidMount: function() {
        this.serverRequest = $.get(this.props.source, function (data) {     
           var old = data.replace("//", "");   
           this.setState({   
                    stock: JSON.parse(old)   
               });
        }.bind(this));
      }

Uncaught TypeError: this.state.stock.map is not a function in React

2 Answers2