title: How to display data with reactJs?
body: <p>I am using ReactJs with Laravel as an API. I Want to display some data but nothing worked for me.</p>
  <p>This is the result of the API:</p>
  <pre class="lang-js prettyprint-override"><code>{
      &quot;user_id&quot;: 2,
      &quot;id&quot;: 1,
      &quot;chat&quot;: [
          {
              &quot;sender_id&quot;: 3,
              &quot;message&quot;: &quot;Hi&quot;
          },
          {
              &quot;sender_id&quot;: 4,
              &quot;message&quot;: &quot;Hello&quot;
          }
      ]
  }
  </code></pre>
  <p>When I try to display <code>user_id</code>, it displayed it but the other part, the chat, didn't show up.</p>
  <p>This is how I consume the API:</p>
  <pre class="lang-js prettyprint-override"><code>const [chatsData, setChats] = useState([]);
  
  // ** Renders Chat
  useEffect(() =&gt; {
    getChats()
  }, []);
  
  const getChats = async () =&gt; {
    const response = await axios.get(`${API_ENDPOINT}/api/listChats`);
    setChats(response.data);
  }
  
  &lt;ul className='chat-users-list chat-list media-list'&gt;
    {chatsData.map((item) =&gt; {
      return (
        &lt;&gt;
          &lt;Avatar img={item?.senders?.user_image} imgHeight='42' imgWidth='42' /&gt;
  
          &lt;li&gt;&lt;h5&gt;{item.chat?.message}&lt;/h5&gt;&lt;/li&gt;
        &lt;/&gt;
      )
    })}
  &lt;/ul&gt;
  </code></pre>
  <p>I will be very thankful if anyone could help me.</p>