Quiero mostrar una broma de API.
Tengo este error: "TypeError: this.state.jokes.map no es una función"
Mi código:
import React, { Component } from "react"; import Footer from "../Footer/Footer"; import axios from "axios"; class Content extends Component { constructor(props) { super(props); this.state = { jokes: [], }; } componentDidMount() { axios .get(`https://sv443.net/jokeapi/v2/joke/Programming?type=single`) .then((res) => { const jokes = res.data; this.setState({ jokes }); }); } render() { return ( <div> <div className="content_containeer"> <h1>Full-stack .NET developer</h1> {this.state.jokes.map((e) => ( <p>{e.joke}</p> ))} <Footer /> </div> </div> ); } } export default Content;Soy un novato en esto y quiero entender por qué se produce este error.
Esta es la respuesta de la URL que obtienes
https://sv443.net/jokeapi/v2/joke/Programming?type=single
{ "error": false, "category": "Programming", "type": "single", "joke": "I have a joke about Stack Overflow, but you would say it's a duplicate.", "flags": { "nsfw": false, "religious": false, "political": false, "racist": false, "sexist": false, "explicit": false }, "safe": true, "id": 301, "lang": "en" } No es una matriz, es un objeto. .map() solo funciona en una matriz.
Puedes probar este en su lugar: https://v2.jokeapi.dev/joke/Any?amount=5&type=Single
busca res.data.jokes como dicen tus jokes