title: data scope in React using Fetch
body: <p>I am trying to understand how can I use fetch to get data from an API and use it to create React components. I am a bit confuse if this is the correct method to retrieve, store and use the data, or if there is another way that I might not be aware (I read something in the docs about states and mounts but I could not get my head around it.</p>
  
  <p>JS</p>
  
  <pre><code>//Data
  const url = 'https://api.tfl.gov.uk/BikePoint'; // API
  
  fetch(url)
  .then((resp) =&gt; resp.json()) // Transform the data into json
  .then(function(data) {
    // How can I make data accessible outside this function?
   })
  
  .catch(function(error) {
    console.log(JSON.stringify(error));
  });
  
  //React
  const List = ({items, each}) =&gt;
  
    &lt;div className = "panel panel-default"&gt;
    &lt;div className = "panel-heading"&gt;&lt;h2&gt;Bike points&lt;/h2&gt;&lt;/div&gt;
      &lt;div className = "panel-body"&gt;   
  
        &lt;ul className = "list-group"&gt;{items.map((item, key) =&gt;
          &lt;ListItem key = {key} item = {each(item)} number={item.commonName}/&gt;)}&lt;/ul&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  const ListItem = ({item, arrival, number}) =&gt;
    &lt;li className = "list-group-item"&gt;{number}&lt;/li&gt;
  
  //How can access the data here?
  ReactDOM.render(&lt;List items={data} each={ListItem} /&gt;, document.querySelector('#main'))
  </code></pre>
  
  <p><a href="https://codepen.io/diegooriani/pen/JJxLPN?editors=0010" rel="nofollow noreferrer">CodePen</a></p>
  
  <p>I would appreciate if you could point me out to any resource that can help me understand this concept. Thank you in advance.</p>