title: How to pull all objects from an array of unknown length and place them into a state variable in React?
body: <p>I imported data from another file (so I technically think it's an object containing an array of objects) called { groupData }. At the moment, the array contains only 5 objects, but it is variable in length and could contain more. Each object looks like this:</p>
  <pre><code>{
    name: &quot;A Name&quot;,
    img: &quot;https://imgURL.goes.here&quot;,
    details: &quot;This is a fun group about fun things.&quot;,
    likes: 45,
  },
  </code></pre>
  <p>My goal is to take each object from the array, modify the data, and place the objects into an empty stateful array called &quot;groups&quot;. I want each object to look like this before it goes into the new &quot;groups&quot; array:</p>
  <pre><code>{
    name: &quot;A Name&quot;,
    img: &quot;https://imgURL.goes.here&quot;,
    details: &quot;This is a fun group about fun things.&quot;,
    hasNotification: Boolean,
    userIsAdmin: Boolean,
  },
  </code></pre>
  <p>I thought of destructuring the array, but this solution is not scalable if things are going to be added to the array:</p>
  <pre><code>const [groupZero, groupOne, groupTwo, groupThree, groupFour] = groupData;
  </code></pre>
  <p>What is the most efficient way to accomplish this? Thank you!!</p>