en mi render yo traigo la informacion de 6 superheroes y sus estadisticas una por una.
{team.length > 0 &&
team.map((oneHeroe, idx) => {
return (
<Col lg={4} sm={6} xs ={12} >
<div key={idx}>
<Card>
<Card.Img variant="top" src= {oneHeroe.image.url} alt="" />
<Card.Body>
<Card.Title className="name">{oneHeroe.name}</Card.Title>
<Card.Title>{oneHeroe.biography.alignment}</Card.Title>
<Card.Text>
<ul className="heroeStats text-left">
<li>Combat: {oneHeroe.powerstats.combat} </li>
<li>Durability: {oneHeroe.powerstats.durability}</li>
<li>Intelligence: {oneHeroe.powerstats.intelligence} </li>
<li>Power: {oneHeroe.powerstats.power} </li>
<li>Speed: {oneHeroe.powerstats.speed} </li>
<li>Strenght: {oneHeroe.powerstats.strength} </li>
</ul>
<p className ="myHeroId"> {oneHeroe.id} </p>
<Button className ="botoneta" as={Link} to={`/heroe-details/${oneHeroe.id}`}>Details</Button>
<Button className ="botoneta" onClick={RemoveHandler}>Delete</Button>
</Card.Text>
</Card.Body>
</Card>
</div>
</Col>
);
})}
Hasta ahi todo perfecto. Pero ahora necesito sumar un total por cada estadistica de los 6 superheroes en un listado asi:
<Col className= "teamStats" lg={12} sm={6} xs ={12}>
<p className="teamStatsTitle">Team Stats</p>
<ul className="teamList">
<li>Total Combat:</li>
<li>Total Durability:</li>
<li>Total Intelligence:</li>
<li>Total Power:</li>
<li>Total Speed:</li>
<li>Total Strenght:</li>
</ul>
</Col>
Como hago para sumar todos los valores de los seis en cada lineal? tengo que hacer un nuevo map asumo pero diferente al que ya hice.
Este es el llamado a la API, los estados y el array que recorro de ids de heroes. Espero se entienda. Me lo pidieron en los comentarios. Saludos.
const [ isLoading, setIsLoading ] = useState(true);
const [ team, setTeam ] = useState([]);
const [ teamStatus, setTeamStatus ] = useState(true);
const heroesIDs = ["346", "332", "274", "287", "208", "225"];
const getData = async (oneID) => {
const response = await fetch(
`https://www.superheroapi.com/api.php/10224590504484555/${oneID}`
).then((response) => response.json());
return response;
};
//component did mount
useEffect(() => {
if(heroesIDs.length !== 6){
setTeamStatus(false);
}
heroesIDs.forEach(async (oneHeroeId) => {
const heroe = await getData(oneHeroeId).then((data) => data);
setTeam((oldState) => {
const oldHeroes = [...oldState];
oldHeroes.push(heroe);
setIsLoading(false);
return oldHeroes;
});
});
}, []); ```