Right, I’m probably missing the obvious here but I am getting an ‘Uncaught TypeError: undefined is not a function’ I seems to be .map() that’s the problem but I can not see why.
var idealist = React.createClass({ loadCommentsFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', success: function(data) { this.setState({data: data}); }.bind(this) }); }, handleButtonClick: function(input) { // do stuff // }, getInitialState: function() { return {data: []}; }, componentWillMount: function() { this.loadCommentsFromServer(); setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, render: function() { var clickFunction = this.handleButtonClick; var ideas = this.state.data.map(function(i){ return <ideabox data={i} onButtonClick={clickFunction} />; }); return ( <div className="idealist"> {ideas} </div> ); } }); React.renderComponent( <idealist url="/json/quotes.php" pollInterval={2000}/>, document.getElementById('quoteList') );
If I change it to var ideas = this.state.data I don’t get any errors, the JSON data is formatted correctly, what can be wrong?
Advertisement
Answer
It was a stupid mistake, quotes.php wasn’t returning properly formatted JSON data so it wasn’t an array .map() was being called on. The lesson learnt? Don’t take other people word for it that their code works!