Como utilizar push no useState React js

Neste artigo você vai aprender a como utilizar push no useState, ou seja, adicionar um item a um array por meio do useState

Fala programador(a), beleza? Bora aprender mais sobre React e seus hooks!

Já deve ter dado aquela vontade de colocar um item em um array do useState com o método push, certo?

Porém esta não é a melhor abordagem quando o estado deste array está controlado pelo useState

Vamos unir duas ações para adicionar um item via useState:

• previous state: valor atual do array;
• spread operator: operador de JS que ajuda a trabalhar com array e objetos;

Com o previous state pegamos os itens que o array já possui

E utilizando o spread conseguimos adicionar o novo item

Veja um exemplo em código:

const [list, setList] = useState([1, 2, 3]);

setList(prevList => [...prevList, 4]) // [1, 2, 3 , 4]

Na primeira linha temos a definição do state, e depois temos a aplicação da nossa abordagem

Veja que em todo set de um state temos acesso ao valor atual dos itens, aqui chamamos de prevList mas você pode chamar do que quiser

Utilizamos o spread para criar um novo array com todos os itens do anterior, o spread espalha os elementos dentro do novo array

E colocamos o nosso novo elemento do array, que aqui no caso foi 4, mas você deve adaptar para o seu projeto

Desta forma o state será alterado com o novo valor incluso no array

Deixe um comentário contando o que achou desta solução 🙂

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

No artigo de hoje você aprendeu a como utilizar push no useState de React JS

Basta definir o valor com um spread operator e colocar o novo item no set do useState

Vimos como podemos aplicar isso com uma linha no exemplo de código deste artigo

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!