Estoy tratando de renderizar varias tarjetas extrayendo datos de la API. Pero el retorno es una matriz, no entiendo por qué el mapa no funciona.
const CharacterCard = () => { const [showModal, setShowModal] = useState(false) const openModal = () => { setShowModal(prev => !prev) } const characters = useRequestData([], `${BASE_URL}/characters`) const renderCard = characters.map((character) => { return ( <CardContainer key={character._id} imageUrl={character.imageUrl}/> ) }) return ( <Container> {renderCard} <ModalScreen showModal={showModal} setShowModal={setShowModal} /> </Container> ) } export default CharacterCardel gancho es este
import { useEffect, useState } from "react" import axios from "axios" const useRequestData = (initialState, url) => { const [data, setData] = useState(initialState) useEffect(() => { axios.get(url) .then((res) => { setData(res.data) }) .catch((err) => { console.log(err.data) }) }, [url]) return (data) } export default useRequestDataParece que el valor predeterminado de los characters no está definido. Así que algo como (characters || []).map.. ayudará, creo. Para una mirada más profunda a esto, puede depurar el gancho useRequestData , ya que no puedo ver la fuente de ese gancho de su ejemplo
