no curso de " React: praticando React com js " na segunda parte " 02. Criando componentes" no execicio " Listando cards " tem 3 perguntas as 2 primeiras são identicas e estão corretas, mais se clicar na primeira diz que está errada e na segunda ele conta como certa. estão duplicadas com resultados diferentes.
https://cursos.alura.com.br/course/react-praticando-react-js/task/118300
Oii, estudante. Tudo bem?
Obrigada pelo seu comentário! Tem uma pequena diferença entre as duas.
Na primeira alternativa, o código utiliza a seguinte sintaxe:
{musicas.map((musica) => (
<Card (...musica) key={musica.id} />
))}
O problema aqui está no uso de (...musica). Essa sintaxe não tá correta. A sintaxe correta para desestruturar um objeto (ou seja, separar suas propriedades e passá-las como props para o componente Card) é utilizando {...musica} — sem os parênteses.
Já a segunda alternativa tá correta:
{musicas.map((musica) => (
<Card {...musica} key={musica.id} />
))}
Aqui, a expressão {...musica} desestrutura o objeto musica, passando suas propriedades (como id, titulo, link, etc.) diretamente como props para o componente Card, o que é o comportamento desejado.
Um abraço e bons estudos.