title: Cannot access object properties via props in ReactJS
body: <p>I fetch data from API and pass it to Table component like this:</p>
  <pre><code>function MainSectionOrganization() {
  
      const [obj, setObj] = useState([]);
  
      useEffect(() =&gt; {
          fetch('http://127.0.0.1:5000/getCompanies')
          .then((response) =&gt; {
              return response.json();
          }).then((data) =&gt; {
              setObj(data);
          })
      }, []);
  
      return (
          &lt;Table data={obj} /&gt;
      )
  }
  </code></pre>
  <p>Then, in Table component, I try to do console.log for props.data[0] and I see data in Chrome terminal correctly.</p>
  <pre><code>import React from 'react';
  import './Table.css';
  import { useTable } from 'react-table';
  
  function Table(props) {
  
      console.log(props.data[0]);
      ...
  </code></pre>
  <p><a href="https://i.stack.imgur.com/GSOwQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GSOwQ.png" alt="enter image description here" /></a></p>
  <p>However, when I try to access any properties of the object, for example <em>console.log(props.data[0].OU01_Code</em>), I encounter an error <em><strong>Cannot read property '...' of undefined</strong></em></p>
  <p>I see many people have solution with class component, but for some reason I need to use function component. Can you help me on this one ?</p>