title: Using useState to store state for an array of objects
body: <p>I am working with react and fetching data from here, <a href="https://jsonplaceholder.typicode.com/users" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com/users</a>. This returns an array of objects and I was hoping to store it in my useState hook. What I have tried right now is this:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  
  const UserList = () =&gt; {
    const [data, setData] = useState([
      {
        id: &quot;&quot;,
        email: &quot;&quot;,
        website: &quot;&quot;,
        phone: &quot;&quot;,
        name: &quot;&quot;
      }
    ]);
  
    useEffect(() =&gt; {
      fetch(&quot;https://jsonplaceholder.typicode.com/users&quot;)
        .then((response) =&gt; response.json())
        .then((json) =&gt; {
          console.log(json);
          json.map((object) =&gt; {
            setData((data) =&gt; [
              ...data,
              {
                id: object.id,
                email: object.email,
                website: object.website,
                phone: object.phone,
                name: object.name
              }
            ]);
          });
        });
    }, []);
  
    return (
      &lt;&gt;
        &lt;div&gt;
          &lt;ul&gt;
            {data.map((info) =&gt; {
              &lt;li key = {info.id}&gt;&lt;/li&gt;;
            })}
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default UserList;
  
  </code></pre>
  <p>I feel I am making some mistakes while using the spread operator to store the data as a console.log reveals. When I place a console.log(info) in the data.map function, it keeps on repeating the ten objects. I am a little unsure exactly how that part of the code is working so if anyone can offer any suggestions or anything that would be helpful.</p>