title: Cannot read property of undefined React js
body: <p>So I have data coming in from an API, to be rendered in a tab component... a function that accepts data from the api and renders it in the component</p>
  <p>issue is, the data isnt persistent, despite me storing it in Localstorage,
  because of this, when I call the generateTabs method and put parameters like in the code below, it throws errors  - Cannot read property 'topic' of undefined</p>
  <p>is there a way to make it conditionally render based on the data?
  or await the data before reading the parameters?
  maybe make it asynchronous?</p>
  <p>Summary of issue:</p>
  <p>data comes from API -- access with function(parameters passed as props to component) -- store in localStorage -- setState from localStorage -- refresh page --  Cannot read property 'topic' of undefined</p>
  <p>I want it to await the data before rendering in the tabs... so persisting isnt an ideal solution</p>
  <pre><code>    useEffect(()=&gt; {
          localStorage.setItem('news', JSON.stringify(news))
      },[])
  
      useEffect(()=&gt; {
          const data = localStorage.getItem('news')
          const mainData = JSON.parse(data)
          setArticle(mainData)
          console.log(article)
          
      },[])
      
  const generateTabs =  (topic, article)=&gt; {
      
       
      return  &lt;Tab tabType = 'tab' className ='nws-container-mid' topic = {topic} article = {article}  /&gt;
             
  }
  
       
     
  
      return (
          &lt;div className =&quot;wrapper&quot;&gt;
          
       
          &lt;div className=&quot;container__Dash&quot;&gt;
                  &lt;Header name = {name}/&gt;
  
  
                  &lt;div className =&quot;container__new&quot;&gt;
                      
                      &lt;div className =&quot;container__tab surface&quot;&gt; 
                          &lt;FeaturedNews  userOptions = {userOptions} country = {country} /&gt;
                          &lt;PictureOfTheDay userOptions = {userOptions} /&gt;
                      &lt;/div&gt;
                      &lt;div className =&quot;container__tab middle&quot;&gt; 
                          {/* {console.log(article[0].topic)} */}
  
                         {generateTabs((article[0].topic))}
                         {generateTabs()}
                         {generateTabs()}
                         &lt;button onClick={openModal}&gt;Set Modal &lt;/button&gt;
                         &lt;Modal showModal={showModal} setModal = {setModal} &gt; &lt;/Modal&gt;
                          
   
                      &lt;/div&gt; 
                     
                         &lt;div className =&quot;container__tab footer&quot;&gt;
  
                         {generateTabs()}
                         {generateTabs()}
  
                          &lt;Settings /&gt;
                          &lt;Weather location = {location} country = {country}/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      )
  }
  
  export default DashBoard
  
  
  </code></pre>