Error Cannot read property map of undefined

0 votes

When I pass a value from the state of one component into another component in Reactjs I am getting this error:

Cannot read property 'map' of undefined'

 

What would cause the prop to be undefined when passing from CommentBox into the CommentList?

// First component
var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment){
      return <div><h1>{comment.author}</h1></div>;
    });
    return <div className="commentList">{commentNodes}</div>;
  }
});
// Second component    
var CommentBox = React.createClass({
   getInitialState: function(){
     return {data: []};
   },
   getComments: function(){
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data){ this.setState({data: data}) }.bind(this),
        error: function(xhr, status, err){ console.error(url, status, err.toString()) }.bind(this)
      });
   },
   componentWillMount: function(){
      this.getComments()
   },
   render: function(){
      return <div className="commentBox">{<CommentList data={this.state.data.comments}/>}</div>;
   }
});

React.renderComponent( <CommentBox url="comments.json" />, document.getElementById('content'));

Any help would be appreciated.

May 9, 2022 in Others by Kichu
• 19,050 points
573 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Others

0 votes
1 answer

Error cannot provide both a color and a decoration in Flutter container.

Hi@akhtar, The color and decoration arguments cannot both be supplied, since it ...READ MORE

answered Jul 29, 2020 in Others by MD
• 95,460 points
5,564 views
0 votes
1 answer

Flutter Error: MediaQuery.of() called with a context that does not contain a MediaQuery.

Hi@akhtar, You need a MaterialApp or a WidgetsApp around your widget. They ...READ MORE

answered Aug 27, 2020 in Others by MD
• 95,460 points
5,089 views
0 votes
1 answer
0 votes
1 answer

Can't bind to 'formGroup' since it isn't a known property of 'form'

In order to rectify this error, you ...READ MORE

answered Feb 10, 2022 in Others by Rahul
• 9,680 points
21,172 views
0 votes
1 answer

HTTP Error 403.14 - Forbidden - The Web server is configured to not list the contents of this directory

Try keeping this into your web config ...READ MORE

answered Feb 11, 2022 in Others by Rahul
• 9,680 points
12,869 views
0 votes
1 answer

How can I remove a port from url for node app using nginx

If you run your node server on ...READ MORE

answered Apr 10, 2018 in DevOps on Cloud by ajs3033
• 7,300 points
3,987 views
0 votes
4 answers

ReactJS vs Angular Comparison: Which is better?

Parameters React Angular Type React is a JavaScript library, and it ...READ MORE

answered Jan 7, 2021 in Events & Trending Topics by Focusteck
• 140 points
1,666 views
+2 votes
4 answers
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP