cuál sería la mejor manera de obtener datos de una API ( https://nba-players.herokuapp.com/players-stats-teams/lal ), ejecutar una función y guardar los resultados, luego usar esos datos para llamar a un punto final de API diferente (por ejemplo, https://nba-players.herokuapp.com/players/curry/stephen )? Para ser más específico, estoy tratando de mostrar una imagen de cada jugador en un componente Avatar usando el nombre y apellido de cada jugador (nombre completo obtenido de la llamada API en App.js, por lo que tendría que dividir y almacenar ( gancho? objeto?) en nombre y apellido). Mapeo a través de cada jugador en App.js. Observo que la API en sí es bastante básica. También se trata de 2 llamadas API en reaccionar

Gracias

 App.js: import React, { useEffect, useState } from "react"; import axios from "axios"; import Card from "./Card"; function App() { const [data, setData] = useState([]); const team = "lal"; const url = "https://nba-players.herokuapp.com/players-stats-teams/" + team; const getData = async () => { try { const teamPlayersData = await axios.get(url); setData(teamPlayersData.data); } catch (err) { console.error(err.message); } }; useEffect(() => { getData(); }, []); return ( <div> {data.map((player, index) => ( <Card key={index} name={player.name} img={getImage(player)} QQQ THIS PART team={player.team_name} rating={player.player_efficiency_rating} /> ))} </div> ); } export default App;

 Card.js import React from "react"; import Avatar from "./Avatar"; function Card(props) { return ( <div className="card"> <li>{props.name}</li> <Avatar img={props.img} /> QQQ <li>{props.team}</li> <li>{props.rating}</li> </div> ); } export default Card;

 Avatar.js *call different API endpoint here to retrieve image, run function to split full name into first and last name in this file? function Avatar(props) { return <img src={props.img} alt="avatar_img" />; } export default Avatar;