[Bug] ao rodar o código da diversos erros no console

Olá, Yasmim! Tudo bem?

Os erros que você está vendo no console são avisos comuns no desenvolvimento com React e não afetam o funcionamento do seu código, mas é uma boa prática corrigi-los para evitar problemas futuros.

1. Aviso sobre a prop "key":

   • O React usa a prop key para identificar quais itens em uma lista foram alterados, adicionados ou removidos. Cada item em uma lista deve ter uma key única.
   • Verifique onde você está mapeando listas nos componentes OpcoesHeader, IconesHeader, UltimosLancamentos e Pesquisa. Certifique-se de que cada elemento filho tenha uma key única. Por exemplo:

     {items.map(item => (
       <Component key={item.id} />
     ))}
     

2. Avisos do styled-components:

   • Os avisos indicam que você está passando props desconhecidas para o DOM. Para evitar isso, você pode usar props transitórias, prefixando com $.
   • Exemplo de uso de props transitórias:

    export const Titulo = styled.h2`
    width: 100%;
    padding: 30px 0;
    background-color: #FFF;
    color: ${props => props.$cor || '#EB9B00'};
    font-size: ${props => props.$tamanhoFonte || '18px;'};
    text-align: ${props => props.$alinhamento || 'center'};
    margin: 0;
    `

<Titulo
    $cor={"#EB9B00"}
    $tamanhoFonte={"36px"}
>

Corrigindo esses avisos, seu código ficará mais limpo e alinhado com as melhores práticas do React.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)