CODEWITHSUNDEEP
reactjs
Cheng
Cheng

Reputation: 17954

React.js tutorial: issues encountered

To run the tutorial properly, I was suppose to start up the server and type: 127.0.0.1:3000 into the url bar to access it. (Let's call this Method 1)

Method 2: However, I thought I could just simply drag and drop the index.html file into the browser and play with it locally.(I started the server simply for grabbing the json file) During this process, I discovered a few differences between these two methods:

  1. In the "Updating state" section, I got an error "Cannot read property 'map' of undefined", the solution was to wrap the following code with an if statement:

    if (this.props.data) {
  var commentNodes = this.props.data.map(function (comment){
      return (
        <div>
          <h1>{comment.author}</h1>
        </div>
      );
  });
}

    But if I use Method 1, the if block is not needed. Why?

  2. In the "Optimization: optimistic updates" section, when I use method 2, after a post has been inserted manually, the webpage will refresh. Like this: click on post -> post inserted manually and appear on the page -> page refresh

But If I use method 1, the page does not refresh after the post has been inserted. Why?

Thank you!

Update: Thanks to Hannes for being so patient. The problem was that I had a typo:

getInitialState: function() {
    return {date: []};    <--- it should be data!!!
},

Upvotes: 0

Views: 124

Answers (1)

Hannes Johansson
Hannes Johansson

Reputation: 1802

After having this discussion we concluded that it was simply a typo in the code. To add some explanation:

this.props.data is what is being passed from the parent component as the "data attribute/prop" on the following line:

<CommentList data={this.state.data} />

Since there was a type in the getInitialState method, this.state.data was undefined.

getInitialState: function() { 
    return {date: []}; 
}

should of course have been

getInitialState: function() { 
    return {data: []}; 
}

Upvotes: 2

Related Questions