title: Selecting item in array by index, while using React hooks
body: <p>TL/DR: Having trouble referencing items in array by index (using React), could use some guidance.  </p>
  
  <p>I am attempting to create a component on my SPA out of data coming from an API. Using React hook useState and useEffect I have created state, done an axios call, and then set the response.data.articles to state (.articles is the array of objects I am using to create the dynamic content). </p>
  
  <pre><code> function App() {
  
    const [storyArray, setStoryArray] = useState();
  
    useEffect(() =&gt; {
      axios.get('http://newsapi.org/v2/everything?domains=wsj.com&amp;apiKey=[redacted_key_value]')
        .then((response) =&gt; { 
          // console.log(response);
          setStoryArray(response.data.articles);
        })
        .catch((err) =&gt; {
          console.log(err);
        })
    }, [])
  
    console.log(storyArray)
  
    return (
      &lt;div className="App"&gt;
        &lt;Directory /&gt;
        &lt;HeaderStory /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>From here, my state is an array of objects. My goal is to pass THE FIRST object as props to the component <code>&lt;HeaderStory /&gt;</code> but any time I attempt to reference this array item with dot notation I am met with an undefined error. My attempt at circumventing this is problem was to set the item to a variable and then pass the variable as props to the component. </p>
  
  <pre><code>const firstStory = storyArray[0];
  </code></pre>
  
  <p>This also resulted in an undefined error. Looking for advice / assistance on referencing items in an array to be passed and used in React. </p>