2
respostas

[Dúvida] De onde vem o id do livro, na ação de clique para adicioná-lo aos favoritos

// código omitido

                    { livrosPesquisados.map( livro => (
                        <Resultado onClick={() => insertFavorito(livro.id)}>
                            <img src={livro.src}/>
                            <p>{livro.nome}</p>
                        </Resultado>

// código omitido

Olá, relacionado à linha insertFavorito(livro.id), de onde vem o id do livro na ação do clique?

Perguntando porque até entendi que cada livro tem o seu id através do map, mas inspeciando o html ele não aparece, então queria saber onde ele fica armazenado / como é obtido no ato do clique.

Desde já obrigado!

2 respostas

Olá! Entendo sua dúvida sobre de onde vem o id do livro na ação de clique. Vamos lá!

Na linha insertFavorito(livro.id), o livro.id é obtido a partir do mapeamento dos livros pesquisados que é feito pela função map.

A função map é usada para iterar sobre os elementos de um array (neste caso, livrosPesquisados) e retorna um novo array com os resultados. No seu caso, para cada livro em livrosPesquisados, a função map está retornando um componente Resultado que inclui um evento onClick. Esse evento onClick chama a função insertFavorito com o id do livro atual como argumento.

Quando você inspeciona o HTML, o id do livro não aparece porque ele não está sendo explicitamente renderizado no DOM. Ele está sendo usado apenas como um argumento para a função insertFavorito quando o evento onClick é acionado.

Espero que isso esclareça sua dúvida. Se você precisar de mais exemplos ou explicações, fique à vontade para perguntar. Espero ter ajudado e bons estudos!

Olá! Obrigado pelo retorno.

Entendi que ele é passado como argumento, mas não entendi como isso é feito, onde os ids ficam armazenados até o momento do clique (uma vez que o id não é renderizado, diferentemente das vars livro.nome e livro.src), é o react que armazena os ids em algum local da memória?

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