Estuve intentándolo toda la mañana y, por mi vida, no puedo obtener datos de matrices individuales para que se muestren desde mi API. Estoy tratando de mostrar un cuerpo de texto de una matriz a la vez, y solo puedo hacer que salga todo a la vez. Funcionaba cuando los datos estaban en formato JSON, pero ahora está en una matriz. Estoy luchando para que funcione.
Mi código:
componentDidMount() { axios .get( "API_DATA" ) .then((res) => { let data = res.data this.setState({ data, loading: false }); console.log(data) }); } render() { if (this.state.loading) { return <Loader /> } // return table if loading is false // handling error goes with the same logic // table will only render if loading is false else return ( this.state.data.data).map((item) => ( <> <p key={item.id}>{item.title}</p> </> )) } } Anteriormente usé [0] o [1] agregado, etc. para determinar qué elemento quería mostrar y esto funcionó muy bien; sin embargo, si pruebo this.state.data.data[0]).map((item) => ( It dice que no es una función.
Salida esperada de la API:
{ "data": [ { "id": 9, "status": "published", "body": "TEST1", "availability": "internal", "title": "Test1", "posted_by": "Tester" }, { "id": 10, "status": "published", "body": "TEST", "availability": "internal", "title": "TEST2", "posted_by": "Tester" },