Não entendi como exatamente o novo elemento é inserido na array no criarNota
E por que o this.state.notas tem os ... antes no criarNota mas no deletarNota não tem.
Não entendi como exatamente o novo elemento é inserido na array no criarNota
E por que o this.state.notas tem os ... antes no criarNota mas no deletarNota não tem.
Fala Roberto, tudo bem?
Vamos lá, você se refere ao curso passado aonde criamos o método criarNota
, certo? Se sim, vou tentar explicar linha a linha como o código funciona:
Primeira linha de código:
const novaNota = {titulo, texto};
Na primeira linha acima, guardamos dentro da variável novaNota
um objeto com de acordo com os parâmetros que estamos recebendo. No ES6 (JavaScript atual), podemos declarar um objeto que possuem a mesma chave e valor declarando apenas a chave, sem o JS6 seria mais ou menos assim esse objeto:
const novaNota = {
titulo: titulo,
texto: texto,
}
Viu que chaves e valores possuem o mesmo nome? Então resumimos isso da forma que fizemos logo na primeira linha de código.
Segunda linha de código: *
const novoArrayNotas = [...this.state.notas,novaNota]
Na linha de código acima, o que fazemos é utilizar o spread operator que irá "espalhar" a variável que estamos passando utilizando o spread, veja um exemplo a baixo:
const numbers = [1, 2, 3, 4, 5] //Aqui temos uma array de números.
console.log([...numbers, 6, 7, 8]) //O retorno seria [1, 2, 3, 4, 5, 6, 7, 8] pois estamos espalhando os elementos e colocando-os na array novamente
E esse é o mesmo que fazemos na segunda linha de código, em que "espalhamos" os items do estado para dentro daquela array e separamos por vírgula aquele objeto que haviamos criado na primeira linha de código, dessa forma adicionando o novo item á array.
Terceira linha de código: *
const novoEstado = {
notas:novoArrayNotas
}
Aqui é bem simples, estamos apenas criando uma variável que é um objeto parecido com o que ja tinhamos no nosso estado, definindo o valor de notas
como a array que acabamos de criar.
Última linha de código
this.setState(novoEstado)
Por fim, o que fazemos é atualizar o estado passando como parâmetro esse novo objeto que criamos.
Utilizamos ...
pois queremos "espalhar" aquele elemento, ou seja, copia-lo, para entender melhor como o spread operator funciona, recomendo dar uma olhada na documentação clicando aqui.
Espero ter ajudado, abraços e bons estudos :D