Olá, não entendi a utilização da sintaxe [name], existe algo que substitua essa propriedade no contexto da aula ?
Olá, não entendi a utilização da sintaxe [name], existe algo que substitua essa propriedade no contexto da aula ?
Olá Santi, tudo bem com você?
Acredito que faz mais sentido te explicar o conceito por traz dessa sintaxe do que te mostrar as alternativas, pois a maioria ou é ineficiente, ou, acaba tornando nosso código muito mais verbosos
Na verdade isso que estamos fazendo é apenas trabalhar com objetos dentro do javacript, então vamos deixar o React um pouco de lado e imaginar o seguinte exemplo:
const nome = "Graciliano Ramos"
const livro = "Bras Cubas"
Agora eu vou criar um objeto com esses 2 valores, e para isso precisamos utilizar a seguinte sintaxe:
let autor = {
[ nome ] : livro
}
Onde a o nome do campo precisa ser indicado entre colchetes []
, e o valor após os :
E agora temos como resultado:
autor = {
Graciliano Ramos: "Bras Cubas"
}
Agora suponha que eu queria alterar o valor Bras Cubas
para Vidas Secas
, para deixar correto, então eu posso fazer da mesma maneira:
autor = {
... autor,
[ nome ] : "Vidas Secas"
}
Veja que aqui como não tenho nada parecido como o setState
eu estou copiando o conteúdo de autor e depois sobrescrevendo a chave [ nome]
E agora temos corretamente:
autor = {
Graciliano Ramos: "Vidas Secas"
}
Ok, agora voltando para o React, temos que o nosso state nada mais é que um objeto da seguinte maneira:
state = {
nome: "",
livro: "",
preco: ""
}
Concorda comigo que podemos alterar ele por exemplo, da seguinte maneira:
state = {
...state,
[ nome ] : " Novo Valor"
}
Igual fizemos anteriormente?
E é justamente isso que está acontecendo, dentro da nossa função escutadorDeInput
pegamos 2 valores, que são: name e value, vamos adicionar 2 prints em nossa função e digitar por exemplo do campo de livro
, teremos os seguintes resultados:
função escutadorDeInput
const { name, value } = event.target;
console.log(name)
>> livro
console.log(value)
>> "A"
Então o que estamos fazendo no setState
é simplesmente fazer:
this.setState = ({
[ livro ] : "A"
})
Veja que o nosso name
sempre equivale a um campo de nosso state
Mas qual seria uma alternativa para isso?
Bem, seria colocar várias verificações, por exemplo:
const { name, value } = event.target;
if(name === "livro"){
this.setState({
livro: value
})
} else if ( name === "nome"){
this.setState({
nome: value
})
} else if ( name === "preco"){
this.setState({
preco: value
})
}
E veja que se adicionarmos mais um campo no formulário iremos precisar adicionar mais um else if
, portanto da maneira que o instrutor fez é mais simples pois dinamicamente já temos o nome da chave e seu valor :)
Conseguiu Compreender? Qualquer Coisa estou a disposição :)
Abraços e Bons Estudos