title: Cannot read property 'name' of undefined - React Native
body: <h1>Question</h1>
  
  <p>Why am I getting this error when I click on the navigation button?</p>
  
  <h1>My code</h1>
  
  <pre><code>render() {
    const { navigate } = this.props.navigation
  
    var listOfPools = this.state.myValue;
    var output = [];
  
    for (var i = 0; i &lt; listOfPools.length; i++) {
        console.log(listOfPools[i].name);
        output.push(
          &lt;Button
                onPress={() =&gt; navigate('DisplayPools', { name: listOfPools[i].name + 'name',  list: listOfPools[i].imageSrcList } ) }
                title={listOfPools[i].name + ' - ' + i}
                key={i}
          /&gt;
        );
    }
  
    return (
         //works
         &lt;Button
             onPress={() =&gt; navigate('DisplayPools', { name: this.state.myValue[0].name,  list: this.state.myValue[0].imageSrcList} ) }
             title={this.state.myValue[0].name}
          /&gt;
        //does not work (when I click the button that appears, it displays the buttons perfectly)
        &lt;ScrollView&gt;{output}&lt;/ScrollView&gt;
    )
  }
  </code></pre>
  
  <h1>What happens</h1>
  
  <p>It outputs all of the buttons, with the correct names (showing that <code>this.state.myValue</code> is defined). Then when I click on the buttons it gives me the error below. </p>
  
  <h1>What should happen</h1>
  
  <p>It should display the names of the buttons (it does) and direct me to the DisplayPools page (it does in the <code>//working</code> code but not in the <code>{output}</code> code). </p>
  
  <h1>Error</h1>
  
  <p><a href="https://i.stack.imgur.com/R2qya.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R2qya.png" alt="enter image description here"></a></p>
  
  <h3>Line 160 (Where the error occurred)</h3>
  
  <pre><code>onPress={() =&gt; navigate('DisplayPools', { name: listOfPools[i].name + 'name',  list: listOfPools[i].imageSrcList } ) }
  </code></pre>
  
  <h1>What I am trying to accomplish</h1>
  
  <p>I would like to send data from my server to my app. Then I would like to have my app display links from the data that my server gave it.</p>
  
  <h1>How I load the data</h1>
  
  <h3>I do not think that this is relevant, but here it is anyway:</h3>
  
  <pre><code>loadData() {
      fetch('http://localhost:8000/home')
      .then((response) =&gt; response.json())
      .then((responseText) =&gt; {
        this.setState({ myValue: responseText.pools, loaded: true, });
      })
      .catch((error) =&gt; {
        this.setState({ myValues: error, loaded: true, });
      });
    }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>componentDidMount() {
      this.loadData();
    }
  </code></pre>