React map got item is not defined

Question

I got repo is not defined. But I console.log(json.items) I can see the arrays.

const githubRepo = React.createClass({
  getInitialState(){
    return {
      repo: []
    }
  },
  componentWillMount(){
    fetch('https://api.github.com/users/abc/repos')
     .then(response => {
      return response.json()
    }).then(json => {
      this.setState({repo: json.items})
    })
  },
  render(){
    return(
      <div>
        <ul>
          {
            this.state.repo.map(repo => 
              <li>{repo .name}</li>
            )
          }
        </ul>
      </div>
    )
  }
})

Something is wrong with my map function? componentWillMount means execute before render, hmm take should make sense. Can't find my mistake.

https://jsfiddle.net/pvg1hg0s/

Answer 1

You need to change json.items to just json.

this.setState({repo: json})

Here is an updated jsfiddle.

Your componentWillMount method should look like this

fetch('https://api.github.com/users/abc/repos')
.then(response => {
  return response.json()
}).then(json => {
  this.setState({repo: json})
})

The reason is that the response which you are referencing as json does not have any keys with item hence this was returning undefined. It is actually returning an array which you can then loop over with map. Firstly you will need to set the value of json to the response of the API call using setState.