[Dúvida] Não estou conseguindo entender erro no console

Olá, Geovana. Tudo bem?

Eu olhei o seu projeto e não encontrei a função handleSubmit que você mencionou no arquivo AdicionarVideos.jsx:

import { styled } from 'styled-components';

const ListaDeVideos = styled.div`
    margin-top: 2rem;
`;

const VideoCard = styled.div`
    background: var(--dark-gray);
    border: 1px solid var(--cor-primaria);
    border-radius: 0.7rem;
    padding: 1rem;
    margin-bottom: 1rem;
`;


export default function AdicionaVideos() {
    
    return (
        <>
            <ListaDeVideos>
                {videos.map((video, index) => (
                    <VideoCard key={index}>
                        <h3>{video.titulo}</h3>
                        <img
                            src={video.imagem}
                            alt={`Thumbnail de ${video.titulo}`}
                            style={{ maxWidth: '100%', borderRadius: '0.5rem' }}
                        />
                        <p>{video.descricao}</p>
                        <a href={video.url} target="_blank" rel="">
                            Assistir ao vídeo
                        </a>
                    </VideoCard>
                ))}
            </ListaDeVideos>
        </>
    )
}

Inclusive, eu fiz um busca por referências no projeto e só encontrei o alias no vite.config.js e a importação e o uso no componente FormularioCard. Mas não a função em si, e por isso o erro está ocorrendo.

Talvez a função foi removida sem você ter notado. Revise o código por favor, estou a disposição para te ajudar :)

Olá, Mike! Obrigada por responder. Consegui resolver esse problema da função handleSubmit, no entanto, ela não está funcionando como esperado. Eu atribuí ela ao formulário com onSubmit e declarei o botão Guardar como type="submit", e reaproveitei o componente para trazer um novo card de vídeo à tona. No entanto, quando insiro as informações no formulário e clico no botão "Guardar", a página recarrega e aparece um protocolo GET com um erro. Repositório: https://github.com/vana-cyber/aluraflix

Oi, Geovana.

O erro que eu recebi é diferente do que você apresentou.

O erro ocorre porque o hook useState está sendo usado fora de um componente funcional. Hooks como useState só podem ser chamados diretamente dentro do corpo de um componente funcional ou de um hook customizado. O erro também ocorre porque você está tentando renderizar JSX dentro de uma função que não é um componente. As alterações abaixo focam em manter o estado centralizado dentro do componente FormularioCard e corrigir o uso dos hooks. Aqui o handleSubmit será gerenciado no componente FormularioCard. Por exemplo:

export default function FormularioCard() {
    const [videos, setVideos] = useState([]);
    const [title, setTitle] = useState('');
    const [section, setSection] = useState('');
    const [thumbnail, setThumbnail] = useState('');
    const [url, setUrl] = useState('');
    const [descricao, setDescricao] = useState('');

    const handleSubmit = (event) => {
        event.preventDefault();

        const novoVideo = {
            id: Date.now(), 
            title,
            section,
            thumbnail,
            url,
            descricao,
        };

        setVideos((prevVideos) => [...prevVideos, novoVideo]);

        setTitle('');
        setSection('');
        setThumbnail('');
        setUrl('');
        setDescricao('');
    };

    const handleClear = (event) => {
        event.preventDefault();

        setTitle('');
        setSection('');
        setThumbnail('');
        setUrl('');
        setDescricao('');
    };

Entretanto, ainda é necessário fazer o ajuste para renderizar o novo vídeo.