Um guia para manipular estado de array em uma aplicação React: Técnicas para mutar arrays.

Criando lista dinâmica utilizando ReactJS

English version: A guide for manipulate Array state in a React Application: Techniques for mutating Arrays

Implementando adicionar e remover itens de listas em tempo de execução.

Fala galera! depois de algum tempo sem postar, eu estou de volta!

Dessa vez vou falar sobre a implementação de listas dinâmicas utilizando o ReactJS, o termo lista dinâmica vai ser muito usado neste post, então vou começar definindo-o:

Uma lista dinâmica como o nome diz é uma lista que pode ser alterada pelo usuário, podemos concretizar o termo com uma lista de tarefas, onde cada tarefa possui nome e data e o usuário pode adicionar ou remover tarefas, sem afetar os outros itens da lista;

Diferente das outras vezes, vou utilizar create-react-app, vou prezar pela simplicidade e não vou utilizar outras bibliotecas nem mesmo styled-components, mas caso você vá utilizar o react em uma aplicação maior, recomendo que utilize React com webpack e styled-components.

Pré requisitos e conhecimentos prévios desejáveis:

Estou considerando neste post que você já sabe sobre layout e, também, como criar um projeto em ReactJS, dito isto, será ignorada toda a parte de criação e configuração do projeto.

• ReactJS
• Layout com FlexBox
• Arrays com JavaScript

Primeiro vamos criar e executar o projeto com:

npx create-react-app dynamic-list-itens
yarn start

Criando os componentes

Em seguida vamos criar um componente que irá servir para exibir cada item na lista, vou ignorar todo o css no artigo, mas você pode pegar o css a partir do repositório no final do artigo.

Basicamente este componente precisará disparar dois eventos para o elemento pai: o evento de edição e o evento de exclusão, para isso criei duas props: onChange e onDelete, também uma prop para receber o nome atual da tarefa: value. De resto é um componente bem simples.

Agora vamos criar um novo componente responsável pela criação de novas tarefas:

Outro componente bem simples, esse irá disparar apenas um evento para o elemento pai: o evento para adicionar a nova tarefa. Esse componente mantém um estado interno com o valor do input e repassa esse valor através do evento onSubmit. Note que usei um form, fiz isso para que seja possível adicionar a tarefa pressionando enter. note também que na função submit eu estou chamando o preventDefault do disparo do form, para impedir que a página seja recarregada após o envio.

Vamos agora à criação do Component que irá conter o que acabamos de criar, esse componente será o responsável por manter o array que irá conter as tarefas, exclusão de uma tarefa e por atualizar uma tarefa também.

Como havia dito este componente mantém um estado interno que é o Array contendo as nossas tarefas.

Existem também três funções: addNewTask, deleteTask e updateTask:

Em todas as funções eu não vou editar o Array do estado diretamente, pois estaria inflingindo uma regra importante do React: não mutar o estado diretamente. Sendo assim vou sempre criar uma cópia do Array, usando Array.from.

O método Array.from() cria uma nova instância de um Array quando for passado um array-like ou um iterable object como argumento.

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Lógica para adicionar, atualizar e excluir tarefas.

addNewTask Essa é a função mais simples responsável apenas por adicionar novas tarefas, nela eu recebo o paramêtro task do evento onSubmit do nosso component NewTaskInput, crio a cópia do Array de tarefas atual, insiro minha nova tarefa com o método push, usando como id o length do array e como value o paramêtro task, por fim atualizo meu estado com a cópia do Array.

updateTask Para atualizar uma tarefa também é bem simples, eu recebo o paramêtro index para indicar qual elemento quero atualizar após isso vou utilizar o método splice,

O método splice altera o conteúdo de um Array, adicionando novos elementos enquanto remove elementos antigos, ou somente removendo elementos.

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

deleteTask Para excluir uma tarefa é basicamente a mesma coisa, utilizo o mesmo método splice porem sem o último argumento, já que neste caso não estou substituindo apenas excluindo.

E este é o resultado final:

Este é o link do projeto no github caso queira modificar a partir dele: https://github.com/digital-heroes/dynamic-list-itens

É isso galera! foi um prazer enorme tomar um pouco do seu tempo. Espero que o post tenha ajudado bastante, se sim, por favor clique algumas vezes no botão de clap e compartilhe com alguém que conheça.

Obrigado pela leitura e até o próximo post!