title: Using React Hooks, when I pass down a prop from parent to a child component, the prop in the child component is undefined
body: <p><strong>What am I trying to do?</strong></p>
  <p>I'm trying to set an array of objects in which the value within the array is dependent on the parent component.</p>
  <p><strong>What is the code that currently tries to do that?</strong></p>
  <p>Here are the different files simplified:</p>
  <pre><code>// Parent.
  
  export default function Parent() {
    const [filePaths, setFilePaths] = useState();
  
    useEffect(() =&gt; {
      var fileContent = JSON.parse(fs.readFileSync(&quot;./config.json&quot;); // Reading from a JSON.
      var tempFilePaths = [];
      fileContent.FilePaths.forEach((file) =&gt; {
        tempFilePaths.push(file);
      });
      setFilePaths(tempFilePaths); // Contents of &quot;config.js&quot; is now in the &quot;useState&quot;.
    }, []);
  
    return (
      &lt;Child filePaths={filePaths}/&gt;
    )
  }
  </code></pre>
  <pre><code>// Child.
  
  export default function Child({filePaths}) {
    var links = [
      {
        path: filePaths[0].Link1,
      },
      {
        path: filePaths[0].Link2,
      },
    ]
  
    return (
      &lt;div&gt;Nothing here yet, but I would map those links to front-end links.&lt;/div&gt;
    )
  }
  </code></pre>
  <pre><code>// config.json
  
  {
    &quot;url&quot;: &quot;http:localhost:3000&quot;,
    &quot;FilePaths&quot;: [
      {
        &quot;Link1&quot;: &quot;C:\Documents\Something&quot;,
        &quot;Link2&quot;: &quot;C:\Documents\SomethingElse&quot;
      }
    ]
  }
  </code></pre>
  <p>When I render the &quot;filePaths&quot; in the <code>return()</code> of the Child component, the &quot;filePaths&quot; is able to be rendered, but I wish to set the &quot;filePaths&quot; to the variable &quot;links&quot;.</p>
  <p><strong>What do I expect the result to be?</strong></p>
  <p>I expect the variable &quot;links&quot; to be fine in the child component, being able to be used within the child component.</p>
  <p><strong>What is the actual result?</strong></p>
  <p>When starting the app I get a <code>TypeError: Cannot read property '0' of undefined.</code></p>
  <p><strong>What I think the problem could be?</strong></p>
  <p>I think the child component renders without the parent component finishing the <code>useEffect()</code>. I'm wondering if there's a way to tell the child component to wait for the parent component to finish, then proceed with setting the variable of &quot;links&quot;.</p>