[Dúvida] Conteúdo não aparece após configurar API com JSON Server

Estou fazendo uma aplicação para listar e adicionar vídeos, e decidi usar uma API para poder reaproveitar o componente < Videos /> para adicionar novos vídeos dinamicamente pela própria API. Após criar um JSON Server para o arquivo videos.json, a aplicação não reconhece "section", e não consigo utilizar o .map, pois aparece no console que ele não reconhece como um array. Ele está captando os dados da API, pois usando o console.log(response.data) aparece sections com suas devidas sections e uma array dos vídeos. Primeiramente, aparecia o erro referente ao .map, e agora que dei console.log(section), ele afirma que section não está definido. Repositório: https://github.com/vana-cyber/aluraflix Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá, Geovana. Tudo bem?

O erro acontece por que no momento em que você faz o console.log(section), section realmente não está definida. Ela é somente uma chave de um objeto dentro de um array de objetos, e para acessar o seu valor você precisa especificar qual elemento do array deve ser impresso no console. Por exemplo:

console.log(response.data[0].section);

Nó código acima, você vai imprimir o valor de section do primeiro elemento do array, que no caso é a string "FRONT-END".

Aqui nos meu testes, remover o console.log(section); foi o bastante para fazer os cards renderizarem normalmente.

Espero ter ajudado!

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

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado