Estoy haciendo dos llamadas desde API con Axios, funciona y me trae los dos resultados que necesito, el problema es que quiero iterar a través de mi primera llamada de Axios, pero dice:

 ./src/app.js Line 29:34: 'p1' is not defined no-undef Search for the keywords to learn more about each error

He estado buscando en Google cómo mapear un JSON, pero ninguno tiene una situación similar. ¿Cómo podría mapear los resultados de mi primera llamada a la API?

Gracias de antemano.

Aquí está mi código.

 import React, { Component } from "react"; import axios from "axios"; import "bootstrap/dist/css/bootstrap.min.css"; const urlPersonas = "https://randomuser.me/api/?results=20&inc=id,name,picture"; const urlMascotas = "https://dog.ceo/api/breeds/image/random/20"; class App extends Component { state = { p1: null, p2: null, }; async componentDidMount() { const [firstResponse, secondResponse] = await Promise.all([ axios.get(urlPersonas), axios.get(urlMascotas), ]); this.setState({ p1: firstResponse.data, p2: secondResponse.data, }); } render() { //Check if the data from my first API call exists console.log(this.state.p1); return ( <div className="App"> <br /> <button className="btn btn-success text-center">Agregar persona</button> <br /> <br /> <table className="table"> <thead> <tr> <th>ID</th> <th>Nombre</th> <th>Apellido</th> <th>Foto</th> <th>Mascota</th> <th>Foto</th> <th>Acciones</th> </tr> </thead> <tbody> //Here is the problem {this.state.p1.data.map((persona, id) => { return ( <tr> <td>{id}</td> <td>{persona.name.first}</td> <td>{persona.name.last}</td> <td>{persona.picture.medium}</td> </tr> ); })} </tbody> </table> </div> ); } } export default App;