Inserting elements at specific array positions

Question

Good night,

I’m trying to interface a room system using React, 8 people can enter each room. I return the users contained in the API room, but I also wanted to indicate the empty spaces of the room, my idea was to try to insert an 8 position default array and when receiving the api data, just insert the amount of api data in the positions according to the quatidade:

const [players, setUsers] = useState(['vazio', 'vazio', 'vazio', 'vazio', 'vazio', 'vazio', 'vazio', 'vazio']);

useEffect(() => {
     api
       .get(`/sala/a092351b-50d6-4f63-a632-4b89417feb7c`)
       .then((response) => setUsers(response.data));
  }, []);

But that way I just overwrite, what I need to return is:

[{ user }, { user }, '{ user }', '{ user }', 'empty', 'empty', 'empty', 'empty', 'empty']

Is there any way to accomplish this in React? I’ve been racking my brain for a long time hahahahahaha

Thanks for your help!

Sample image:

Answer 1

Good You can use Array(8), thus creating an array with 8 empty positions.

Places Array(n) inside useState.