Aula 08
Curso React: Componentes Controlados
Summary
Sure! Here's a summary of the provided transcript in Markdown format:
# Summary of Transcript
The video discusses implementing checkbox functionality using an object in state rather than an array, which simplifies the process.
## Key Points:
1. **Using Objects Instead of Arrays**:
- The state can contain an object (e.g., `fruits`) with properties like `banana`, `apple`, and `strawberry`, set to either `true` or `false`.
2. **Accessing State**:
- Instead of searching through an array, you can directly access the state properties (e.g., `this.state.fruits.banana`).
3. **Checkbox Update Logic**:
- The `onChange` event can modify the checkbox states based on the property name using bracket notation.
4. **Dynamic Property Updates**:
- The property name can be dynamic, allowing for the toggling of the checkbox state (from `true` to `false` or vice versa) based on user interaction.
5. **Using Object.assign**:
- To update the state, create a copy of the fruits object using `Object.assign` to avoid direct state modification and to ensure the component re-renders correctly.
6. **Final Steps**:
- Create a new object with the updated property and use `setState` to update the state with the modified object.
This method streamlines checkbox management in applications by leveraging object properties efficiently.
Feel free to modify any part of this summary as needed!
Video Transcript
Se você notar, a gente fez muita coisa só para ter essa funcionalidade aqui com array
e tal.
Com mediciante, a gente pode fazer com um objeto em vez de um array fica muito mais
fácil.
Dessa maneira, em vez de ter um array, eu vou botar um objeto assim, vai ter banana,
true ou false?
Principalmente se não for sucessional, vai ter assim.
A bom, false, morango, false assim por diante.
Então vamos...
Esse vídeo vai ser só para uma alternativa de como fazer checkbox com um objeto no
estado.
Se você não tiver interessado, já souberia se a prova dessa método, por favor, não
precisa...
Pode ir pular esse vídeo.
Então vamos lá.
A gente vai fazer desse jeito.
Então fica muito mais fácil se a gente quer fazer o check lá no cara aqui, em vez de
dar uma busca, não precisa fazer nada.
Só ver esse.state.frutus.
Ponto o quê?
Ponto banana.
Mesmo maneira que tem essa propriedade chamada banana dentro array frutus que está dentro
do estado.
Nessa mesma maneira eu quero que você atualize as outras checks, vou esperar e deu tudo certo.
Vamos lá, só mudar o estado de frutus.
Ponto maçã.
Eu nem voltei os assentos, mas se você quiser poder acerdir e tal.
O estado de frutus.
O quê?
Morango.
Tá bom?
Muito mais simples usando o objeto.
Vamos testar.
Vai lá em cima.
Está tudo falso.
Vamos botar true para banana e ver o que acontece.
Agora está selecionado.
True para morango.
Está selecionado e assim por diante.
Vou voltar para o false.
Tá bom?
Agora a gente vai dar o on change.
Tem que modificar esse cara todinho.
Como é que a gente vai fazer esse on change?
Não precisa mais index of.
Vamos apagar tudo.
O que a gente vai fazer agora?
O cenote que a gente tem um objeto no desistente.frutus que é chamado frutus aqui e dentro desse objeto
tem frutus.maçã, frutus.banana, esse em por diante.
Como é que a gente vai mudar esse cara?
Vamos ver.
Cenote que o evento.targer.value é um valor que pode ser o nome da propriedade.
A maçã eu dei o nome com maçã e tal.
Então se eu fizer uma variável assim com string por exemplo banana, você tem um objeto
com as frutas assim.
Então frutas, se você tiver frutas, o que é o a banana?
Se você usar essa notação de brackets, o a vai virar banana porque está usando brackets.
Vai ser indefinido mas eu vou definir como true.
E agora vou olhar no frutus, tem um objeto com banana true.
Então se você não tiver frutas, ponto a e the true vai ser o a, propriedade a.
Olha no frutus, vai ter o a né, mas eu não quero.
Então tem que usar a notação brackets.
Então vamos lá, a gente tem que botar o nome da propriedade, seja banana, seja morango,
seja maçã.
Como é que a gente vai fazer isso?
A gente tem um value, tem um nome ou qualquer propriedade você pode usar.
Tem frutas, limaçã, você pode mudar esse nome para ser o nome da propriedade assim
por diante, mas eu vou deixar assim para o padrão e vou usar o valor.
A gente vai usar o value aqui como o nome da propriedade.
E a gente vai fazer o que?
Quando esse fruto usar value?
Vamos dar um new fruto aqui.
Vai ser o que?
Primeiro vamos pegar, deixa eu voltar aqui, vou pegar aqui o novo valor.
Novo valor.
Mas a gente não pode modificar o estado diretamente, então como é que eu vou fazer?
Vamos pegar aqui o frutas.
Se você não está confundido nesse caso, pode fazer esse destruturamento primeiro.
Desse state of frutas, depois dá refactory e tira esse cara, vamos fazer tudo do zero
de novo.
Desse state of frutas, esse cara vai se referir a esse cara todo.
A gente quer pegar uma das propriedades por audadas e modificar.
E se for false vai se tornar true, se for true vai se tornar false.
É sempre, a gente pode usar o operador de exclamação.
Se for desse do state of frutas com o value, nesse caso pode ser banana, maçã ou morango.
A gente vai pegar esse cara e botar o exclamação, que a gente quer que seja um novo estado.
Mas vai ser frutas, ponto, value, vai ser assim, algo assim.
Esse aqui é value, se for de objeto vai ter que ser um objeto com a nova propriedade.
Esse aqui vai ser substituído, a gente tem que fazer assim.
Tá bom?
Vai substituir value, vai ser banana aqui, por exemplo, e vai ser banana aqui.
E a banana vai ser o estado da banana anterior, invertido.
Entendeu?
Para que a gente está usando esses brackets?
Então esse aqui vai ser a nova propriedade.
Tá bom?
Const new value object ou alguma coisa que você, qualquer nome que você quiser.
Tá bom?
Agora a gente dá o set state, para que?
Para frutas.
Mas a gente tem que fazer o quê?
Tem que fazer o cópia da frutas e modificar essa propriedade.
O maneiro de fazer isso é assim.
Você pode mudar o object, o assign, por exemplo.
Esse object, ponto, assign, vai fazer um cópia do objeto, por exemplo.
Vou dar um exemplo aqui.
Se você tiver consta object, a, vamos fazer abc assim.
Nome, idade, abc, um objeto, tem nome e tem idade.
Se eu quiser fazer um cópia, vou usar object, ponto, assign, passa um objeto vazio
e passa o abc.
Nesses casos, copiar todas as propriedades do abc no novo objeto.
Tá bom?
Vamos dar um assign para df.
df é um objeto, copia do abc.
Tá bom?
Não são os mesmos.
Note que eu vou fazer abc, nome, mudar.
Abc, nome, meu nome.
df, João ainda, porque é objeto diferente.
Entendeu?
Então, object, assign, fazer o cópia do objeto.
Qual é o objeto aqui?
Adicione da fruta, destate frutas.
Tá bom?
Mas a gente quer adicionar nova propriedade.
Você pode fazer a mesma coisa que eu fiz aqui, abc, nome.
Se você passar no object, assign, um objeto, nome, meu nome, mesma coisa.
Entendeu?
Ah, nesse caso eu defini de novo, então não pode fazer.
Vou mudar o nome aqui, ghi.
Então, gui tem copia do objeto com o meu nome aqui.
Abc ainda tá, que eu tinha mudado.
Abc.nome, abc.ghi diferente, né?
Então aqui, faço um objeto vazio, copia as propriedades, destate, sete, frutas.
E adicione essa nova propriedade, new value object.
Tá bom?
E finalmente, eu posso dar esse object assign como propriedade aqui.
Você que fica muito feio, então vou botar dentro da variável chamada const new frutas.
Aqui eu vou dar new frutas.
Certo?
Vamos dar avisada aqui.
Pode...
Um beijo.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: