Así que estoy tratando de diseñar datos de mis componentes de reacción renderizados y tengo el siguiente problema.
Creo que mi problema es "Llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:" pero no puedo solucionarlo.
import {useEffect, useState} from "react"; import React from 'react' import styled from 'styled-components'; import ButtonUnstyled from '@mui/base/ButtonUnstyled'; // import { Title } from '../MainElements'; const API_BASE = "http://localhost:3001"; export const RocketCard = () => { const [rockets, setRockets] = useState([{ name: '', id: '' }]) useEffect(() => { fetch(API_BASE + '/rockets') .then(res => res.json()) .then(data => setRockets(data)) .catch((err) => console.error("Error: ", err)); },[]) return ( <div className="container"> <Title>Test</Title> {rockets.map(rocket => <div className="rocket" key={rocket._id} > <h1>{rocket.name}</h1> </div> )} </div> ); } const Title = styled.h1` display: flex; align-items: center; line-height: 1.2; `;