não aparecem os dados

Olá Herlon! Tudo bem contigo?

Nesse caso pode existir um problema no momento de renderizar os itens da lista. Então eu peço que coloque seu projeto no Github e me mande o link do repositório, para testar por aqui.

Mas já adianto que uma possibilidade bem provável é que você pode estar tratando os dados recebidos via props no componente de <Card /> de forma equivocada.

Contudo, sem seu código completo eu realmente não posso ajudar somente com a quantidade de informações disponibilizadas.

Também tem o aviso no terminal, informando que dadosFilmes não está sendo usado, isso pode estar relacionado ao problema também.

Então era isso!

Bom dia, td bem e com vc?

segue https://github.com/einnovationline/cinetag

Opa Herlon! Tudo bem contigo?

Era como eu suspeitava, o problema estava no componente <Card />. Lá você recebia as propriedades do Json via props, contudo não estava tratando elas corretamente!

Assim, o que foi necessário, foi arrumar isso e pronto.

No caso o que você fez foi usar as propriedades assim:

<div className={styles['card-container']}>
            <img src={props.cover} alt={props.title} className={styles.cover} />
                <h2>{props.title}</h2>
                <img src={iconeFavoritar}
                    alt="Favoritar Filme"
                    className={styles.favoritar} />
        </div>

Você chamou as props de props.cover e props.title, no inglês, mas o que você talvez não pegou é que essas propriedades não existem no JSON, no JSON só temos essas opções: id, titulo, capa, e link, que são as propriedades do JSON, ou seja, não temos uma opção cover e/ou title. Entende? Então o ponto é tudo o que precisei fazer foi alterar:

props.cover para => props.capa;
props.title para => props.titulo.

E pronto problema resolvido!

Aqui o código completo e correto:

import styles from './Card.module.css'
import iconeFavoritar from './favoritar.png'

export default function Card(props) {
    return (
        <div className={styles['card-container']}>
            <img src={props.capa} alt={props.titulo} className={styles.capa} />
            <h2>{props.titulo}</h2>
            <img src={iconeFavoritar}
                alt="Favoritar Filme"
                className={styles.favoritar} />
        </div>
    )
}

//export default Card--> já faço o export na declaração da função

Era isso, se precisar conte com a comunidade do fórum!

Abraços e bons estudos.

Obrigado, só para melhorar meu conhecimento, como vc chegou a esse erro?

Oie Harlon! Eaí?

Bom, na verdade, isso vem com o tempo, sabe, depois de ver vários erros e se acostumar com eles, encontrar as soluções, fica um pouco mais fácil.

1. Mas pelo menos para mim, eu primeiro tento entender o problema, esse é primeiro passo, entender o problema;
2. Depois eu penso no resultado ideal, ou seja, o resultado que quero no final;
3. Após isso, eu avalio a parte do código que eu acredito estar relacionada ao problema;
4. Depois eu formulo hipóteses de qual pode ter sido o problema e como solucionar isso;
5. Seguindo isso, já começam os testes, eu mexo no código sem dó kkk;
6. E após encontrar o problema, eu entendo o que gerou aquilo e vou atrás de uma solução que leve àquele final ideal que mencionei antes.

No seu caso foi algo assim que fiz:

1. Eu entendi que tinha um problema com a renderização dos dados recebidos do JSON;
2. Entendi que o final ideal seria os cards terem tudo renderizado corretamente;
3. Depois comecei a pensar que o problema poderia estar na importação dos itens do JSON, ou na forma como os dados recebidos estavam sendo tratados;
4. Então eu comecei os testes, comecei a mexer na importação e testar se o caminho estava certo, fui ver o jsconfig.json, se estava certo, testei várias formas e tudo indicava que o problema não estava ali;
5. Então a primeira hipótese estava errada, então fui para a segunda, que se provou correta, pois você estava tratando os dados de uma forma que não correspondia com o que você estava recebendo do import, você estava chamando dados que não existiam no JSON, então ali foi onde o erro/problema foi diagnosticado;
6. Após isso, eu somente precisei corrigir isso e trazer dados que realmente existiam e estavam sendo recebidos, com isso, a solução havia sido encontrada.
7. Daí para frente tudo foi mais fácil.

Mas o processo foi algo nesse caminho. Entendeu? Era essa a dúvida?

Bom, de toda forma, era isso, espero ter esclarecido o que você queria saber!

Desculpe a demora em obter o retorno!

Mas se precisar é só chamar!

Abraços e sucesso em seus estudos.