Oi, Geovana. Tudo bem?
Conferi o seu código e há alguns pontos a ajustar:
1 - VideoContext:
Passei a requisição para dentro do context, assim a lista de videos é passada para a variável listaVideos:
import React, { createContext, useState, useEffect } from 'react';
// Criação do contexto
export const VideoContext = createContext();
// Provedor do contexto
export const VideoProvider = ({ children }) => {
const [listaVideos, setListaVideos] = useState([]);
useEffect(() => {
fetch('http://localhost:3000/sections')
.then(response => response.json())
.then(data => setListaVideos(data))
.catch(error => console.error('Erro ao buscar vídeos:', error));
}, []);
return (
<VideoContext.Provider value={{ listaVideos, setListaVideos }}>
{children}
</VideoContext.Provider>
);
};
2 - map:
Acho que entendi qual é a ideia e fiz uns ajustes para mapear o array de videos com base em suas respectivas seções:
return (
<div>
{listaVideos.map((secao) => (
<div key={secao.id}>
<h2>{secao.section}</h2>
<ListaSeções>
{secao.videos.map((video) => (
<li key={video.id}>
<CardVideo>
<a href={video.url} target="_blank" rel="noopener noreferrer">
<img src={video.thumbnail} alt={video.title} />
</a>
<figcaption>
<h3>{video.title}</h3>
<BotaoCard />
</figcaption>
</CardVideo>
</li>
))}
</ListaSeções>
</div>
))}
</div>
);
No entanto, ainda há alguns ajustes a serem feitos com relação aos estilos. Se ainda precisar de ajuda com algo, não hesite em me chamar!
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
