title: Calling functions in the parent and transferring data to the child
body: <p>I have two components, <code>Layout</code> and<code> Chat</code>. <code>Chat is a child</code>. When I call the function <code>showChat()</code>, I have a message in the <code>Chat</code> component:<code> Cannot read property 'map' of undefined</code>. I am trying to transfer data from parent to child.</p>
  <p><strong>Layout</strong></p>
  <pre><code>import Chat from '../components/Chat';
  
  
  const Layout = ({children, match, history}) =&gt; {
  
    const [values, setValues] = useState({
      visibleChat: false,
      chatters: []
      });
  
    const getAllChatters = () =&gt; {
  
      axios({
        method: 'GET',
        url: `${process.env.REACT_APP_API}/get-all-chatters`
      })
      .then(res =&gt; {
        console.log(res, 'chatters');
  
        setValues({...values, chatters: res.data});
      })
      .catch(err =&gt; {
        console.log('error', err &amp;&amp; err.response ? err.response.data  : '');
  
      })
    }
  
  
    
    const showChat = () =&gt; {
      setValues({visibleChat: !visibleChat});
      getAllChatters();
    };
  
    
      const {visibleChat, chatters} = values;
  
  
      const nav = () =&gt; (   
          &lt;Menu&gt;     
            &lt;Menu.Item&gt;
              &lt;MessageOutlined onClick={showChat}/&gt;
            &lt;/Menu.Item&gt;        
          &lt;/Menu&gt;
      );
      
      return (
          &lt;Fragment&gt;
              {nav()}
              &lt;Chat visibleChat = {visibleChat} visibleChatUser = {visibleChatUser} chatters = {chatters} idSender = {_id} roleSender = {role} onCloseChat = {onCloseChat}/&gt;
          &lt;/Fragment&gt;
      );
  };
  </code></pre>
  <p><strong>Chat</strong></p>
  <pre><code>const Chat = ({visibleChat, chatters}) =&gt; {
  
    const [values, setValues] = useState({
  
    });
    
  
    return (
      &lt;&gt;
          &lt;Drawer
            title=&quot;Drawer&quot;
            onClose={onCloseChat}
            visible={visibleChat}
          &gt;
            &lt;ul className=&quot;chatters&quot;&gt;
                  {chatters.map(function(chatter) {
                  return &lt;li className=&quot;chatter&quot; key={chatter['_id']}&gt;
                          &lt;/li&gt;;
                  })}
            &lt;/ul&gt;
          &lt;/Drawer&gt;
      &lt;/&gt;
    );
  };
  
  export default Chat;
  </code></pre>