Boa noite,
Estou tentando criar uma interface de um sistema de salas utilizando React, para cada sala podem entrar 8 pessoas. Eu retorno os usuários contidos na sala da API, mas queria tambem indicar os espaços vazio da sala, a minha ideia foi tentar inserir um array default de 8 posições e ao receber os dados da api, apenas inserir a quantidade de dados da api na posições de acordo com a 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));
}, []);
Mas dessa maneira eu apenas sobrescrevo, o que preciso retornar é:
[{ user }, { user }, '{ user }', '{ user }', 'vazio', 'vazio', 'vazio', 'vazio']
Existe algum jeito de realizar isso no react? Já estou a um bom tempo quebrando a cabeça hahahahahaha
Agradeço a ajuda desde já!
Imagem de exemplo: