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!