Criando lista dinâmica utilizando ReactJS

Wes Guirra
Nov 4 · 4 min read

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

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!

React Brasil

Tudo sobre o mundo React

Wes Guirra

Written by

Desde que me entendo por gente, procuro maneiras de inovar para melhorar o mundo em que vivemos.

React Brasil

Tudo sobre o mundo React

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade