0

estoy aprendiendo React y Nextjs y tengo una duda sobre una aplicación de prueba que estoy desarrollando, tengo una función que dependiendo del parámetro que pasemos me devuelve un icono de un color u otro. Este icono es un componente de material-ui. El caso es que al devolverlo en pantalla me aparece un [object Object] en lugar del componente:

Esta es la función:

function getIcon(position){
switch (position){
  case "1":
        return <EmojiEventsTwoToneIcon style={{color: '#cdcd2d'}} />
  case "2":
    return <EmojiEventsTwoToneIcon style={{color: '#b0b0b0'}} />
  case "3":
    return <EmojiEventsTwoToneIcon style={{color: '#dfc6a1'}} />
  default: 
    return position
}

}

Esta es la llamada en el render:

              <TableBody>
            {league.map(l => (
              <TableRow key={l.id}>
                <TableCell component="th" scope="row">
                  {getIcon(l.position)+'# '+l.equipName}
                </TableCell>
                <TableCell align="right">{l.victory}</TableCell>
                <TableCell align="right">{l.lost}</TableCell>
                <TableCell align="right">{l.favorGoal}</TableCell>
                <TableCell align="right">{l.counterGoal}</TableCell>
              </TableRow>
            ))}
          </TableBody>

Muchas gracias por su ayuda.

Un saludo.

1
  • Que valor tiene tu variable "l.position" ? el 22 ago. 2020 a las 1:21

1 respuesta 1

0

Dando por hecho que el valor de tus objectos en el la propiedad "position" cumple con uno de los valores correcto, tienes un error al intentar sumar un string al componente de respuesta del método {getIcon(l.position)+'# '+l.equipName} al tratar de hacer la suma es cuando generas ese objecto que react no puede interpretar de manera correcta, tu código debería ser de la siguiente manera:

      <TableBody>
        {league.map(l => (
          <TableRow key={l.id}>
            <TableCell component="th" scope="row">
              {getIcon(l.position)} {'# '+l.equipName}
            </TableCell>
            <TableCell align="right">{l.victory}</TableCell>
            <TableCell align="right">{l.lost}</TableCell>
            <TableCell align="right">{l.favorGoal}</TableCell>
            <TableCell align="right">{l.counterGoal}</TableCell>
          </TableRow>
        ))}
      </TableBody>

Una alternativa al uso de Switch dentro de JS es que podrias utilizar un objecto e intentar ingresar al indice deseado, se vería un poco mejor de la siguiente manera:

function getIcon(position) {
  const iconos = {
    "1": <EmojiEventsTwoToneIcon style={{ color: "#cdcd2d" }} />,
    "2": <EmojiEventsTwoToneIcon style={{ color: "#b0b0b0" }} />,
    "3": <EmojiEventsTwoToneIcon style={{ color: "#dfc6a1" }} />,
  };
  return iconos[position] || position;
}
1
  • Era eso, muchas gracias por la ayuda. En cuanto a la función, tienes razón, se ve más clara como comentas, tomo nota.
    – Dsgg
    el 22 ago. 2020 a las 10:52

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.