Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Outra maneira sem usar [name] : value

Olá, não entendi a utilização da sintaxe [name], existe algo que substitua essa propriedade no contexto da aula ?

1 resposta
solução!

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