Map JSON from API Javascript

Question

I am making two calls from API with Axios, it works and it brings me the two results I need, the problem is that I want to iterate through my first Axios call, but It says:

./src/app.js
Line 29:34:  'p1' is not defined  no-undef

Search for the keywords to learn more about each error

I have been looking on Google how to map a JSON, but none of them have a similar situation. How could I map my first API call results?

Thank you in advance.

Here is my code.

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;

Answer 1

First of all, the first api response is an object with info and results , so you may want to assign results to your state:

this.setState({
      p1: firstResponse.data.results,
      p2: secondResponse.data
});

Next, on the first mount that state will be null, so you can prevent its render changing this line using conditional chaining:

{this.state.p1?.map((persona, id) => {