title: How to pass props from parent to child in react?
body: <p>I've been refactoring a small application that was initially within one file into it's own separate components. Currently I have a child component <code>UsersTable</code> that I am rendering within the parent <code>Users2</code>. I am passing some dummy data from the parent as props to the child but am getting the lovely <code>Cannot read property 'map' of undefined</code>.</p>
  <p>I am using react hooks and passing props with the spread operator in the parent:</p>
  <pre><code>&lt;UsersTable {...columns} {...data} /&gt;
  </code></pre>
  <p>And the child is receiving that here:</p>
  <pre><code>    export const UsersTable = props =&gt; {
    const [usersState, setUsersState] = useState(props)
  
    useEffect(() =&gt; {
      setUsersState(props)
    }, [props])
  
    const renderUsers = () =&gt; {
      if (usersState) {
        return usersState.map(d =&gt; items(d))
      } else {
        return noData
      }
    }
  </code></pre>
  <p>As well as down in the return function here:</p>
  <pre><code>&lt;ActionList columns={usersState}&gt;{renderUsers}&lt;/ActionList&gt;
  </code></pre>
  <p>I am specifically trying to figure out why the data prop (an array of objects), is returning undefined. Linking my sandbox <a href="https://codesandbox.io/s/luka-content-access-extension-kqdl8?file=/src/components/UsersTable.tsx:282-571" rel="nofollow noreferrer">here</a>. I wondering if the issue is perhaps related to passing multiple separate props via spread operators.</p>
  <p>Any help or advice around what I am trying to accomplish would be much appreciated!</p>