title: ReactJS - TypeError: Cannot read property 'name' of undefined
body: <p>I'm fetching data from an API and I want to show on the screen some objects 
  (for example 'name' object) and I'm getting the following error:</p>
  
  <p><code>"TypeError: Cannot read property 'name' of undefined"</code></p>
  
  <p>I already tried to show data after the api request (with booleans) </p>
  
  <p>Does anyone know what might be the problem? </p>
  
  <pre><code>class App extends Component {
    constructor(props) {
      super(props)
      this.state = {
        products: {},
      }
      this.fetchDevices = this.fetchDevices.bind(this);
  }
  
  async fetchDevices() {
    const url = 'my url';
    const response = await fetch(url, {method : 'GET', headers : headers});
    const data = await response.json()
    this.setState({products : data.value})
  }
  
  componentDidMount() {
    this.fetchDevices();
  }
  
  render() {
    return (
      &lt;div&gt;
        {this.state.products ? &lt;p&gt;{this.state.products[0].name}&lt;/p&gt; : null}     
      &lt;/div&gt;
    )}
  }
  
  export default App
  
  {
  "value": [
      {
          "urn": null,
          "name": "New_COMEC",
          "description": null,
          "icon": "icon-energy-meter",
          "customIdFormat": null,
          "customIdDisplay": true,
          "customIdRequired": true,
          "serialNumberFormat": null,
          "serialNumberDisplay": true,
          "serialNumberRequired": false,
          ....,
      }
  ]
  </code></pre>