1
resposta

Novo Elemento na Array.

  1. Não entendi como exatamente o novo elemento é inserido na array no criarNota

  2. E por que o this.state.notas tem os ... antes no criarNota mas no deletarNota não tem.

1 resposta

Fala Roberto, tudo bem?

1 - Como os elementos foram inseridos na array:

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.

2 - Uso do Spread Operator

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

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software