React — Iterating on multiple instaces from an API

react.js

class App extends React.Component {
  render() {
    return (
      <ul>
        <Data />
      </ul>
    )
  }
}


class Data extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      names: [],
      requestFailed: false,
    }
  }
  
  componentDidMount() { 
    
    
    fetch('https://api.tfl.gov.uk/BikePoint')
    .then((response) => {
      return response.json()
    }).then((response) =>  {
      console.log('parsed json', response[0].commonName)
      // remap of names 
      this.setState({
        names: response.map((response) => response.commonName)
      })
    }).catch(function(ex) {
      console.log('parsing failed', ex)
      this.setState({
          requestFailed: true
        })
    })
  }
  
  render() {
    const {
      names,
    } = this.state
    
    if(this.state.requestFailed) return <p>Request failed.</p>
    if(!names) return <p>Loading</p>
    
    const namesList = names && names.map(function(name, index){ //Why names && names?
      return <ListItem key={index} name={name} />
    })
    
    return  <ul>{ namesList }</ul>
  }
}

class ListItem extends React.Component {
  render() {
    const {
      key,
      name
    } = this.props
    return <li key={key}> { name } </li>
  }
}

ReactDOM.render(<App />, document.getElementById('app'));