1

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;
    });
  });
}, []); ```
2
  • Puedes adjuntar el JSON que estas recorriendo? Commented el 21 oct. 2021 a las 21:25
  • Ahi lo adjunte abajo de todo. Gracias. Commented el 22 oct. 2021 a las 15:44

1 respuesta 1

0

Te recomiendo usar un reducer para generar el total, luego puedes usar las técnicas que has utilizado con cada super héroe por separado para mostrar el acumulado. Te pongo un ejemplo de cómo podrías usar el reducer en tu caso:

const heroes = [{
    powerstats: {
      power: 3,
      speed: 2,
      strenght: 5
    }
  },
  {
    powerstats: {
      power: 1,
      speed: 8,
      strenght: 9
    }
  },
  {
    powerstats: {
      power: 0,
      speed: 1,
      strenght: 1
    }
  }
]

console.log(
  heroes.reduce((prev, {
    powerstats
  }) => {
    return {
      power: prev.power + powerstats.power,
      speed: prev.speed + powerstats.speed,
      strenght: prev.strenght + powerstats.strenght,
    }

  }, {
    power: 0,
    speed: 0,
    strenght: 0
  })
)

3
  • Cuando estoy intentando usar este metodo estoy teniendo este error --------Error: Objects are not valid as a React child (found: object with keys {response, id, name, powerstats, biography, appearance, work, connections, image}). If you meant to render a collection of children, use an array instead.----- Commented el 22 oct. 2021 a las 21:56
  • La respuesta aparece marcada como aceptada en la lista
    – g.4
    Commented el 22 oct. 2021 a las 22:53
  • 1
    @IgnacioHardoy Tal y cómo dice el error parece que estás tratando de renderizar un objeto en tu JSX dentro de un componente. Este problema es algo totalmente separado de lo que postulas en tu pregunta. Una vez sumados los elementos en el nuevo objeto debes de generar los nuevos componentes para que rendericen el resultado total.
    – FranAcuna
    Commented el 23 oct. 2021 a las 1:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.