1

Tengo una consulta, tengo una tabla en la cual se muestran los resultados de la API de pokemon y lo que necesito es que al hacer click en un boton obtenga los datos de la fila, bueno hasta aquí todo bien, ahora lo que quiero hacer es que esos datos que obtengo los envie a otro componente ya que en la tabla se mostrara poca información y cuando se haga click quiero que se muestren mas datos en una tarjeta, pero mi pregunta es: como puedo enviar esos datos a otro componente para renderizarlos?

Tabla con la info

export const Lista = (props) => {

    const [, setPokeSelec] = useState({
        id: '',
    })

    const seleccionarFila = ( poke ) => {

        setPokeSelec( poke );
        console.log(poke);
    }
    
    return (

        <>
            <TableRow key={ props.info.id }>
                <TableCell component="th" scope="row">
                    { props.info.id }
                </TableCell>
                <TableCell align="right">{ props.info.name }</TableCell>
                <TableCell align="right">{ props.info.abilities[0].ability.name}</TableCell>
                <TableCell align="right">
                    <img src={ props.info.sprites.front_default } alt={ props.info.name } style={{ height: 60 }} />
                </TableCell>
                <TableCell align="right">
                    <Button 
                        variant="contained" 
                        color="primary" 
                        size="small" 
                        onClick={ () => seleccionarFila( props.info ) }
                    >
                        Seleccionar
                    </Button>
                    </TableCell>
            </TableRow>
        </>
    )
}

Este es el componente donde quiero mostrar los datos seleccionados

export const Informacion = () => {

    const classes = useStyles();

    return (
        <div className={ classes.margen } >
            <Box display="flex" justifyContent="center" alignItems="center">
                <Card className={classes.root}>
                    <CardMedia
                        className={classes.cover}
                        image={pika}
                        title="Live from space album cover"
                    />
                    <div className={classes.details}>
                        <CardContent className={classes.content}>

                        <Typography component="h5" variant="h5">
                            Pikachu
                        </Typography>

                        <Divider/>

                        <Typography variant="subtitle1" color="textPrimary">
                            Tipo:
                        </Typography>

                        <Typography variant="body1" color="textSecondary">
                            Electrico
                        </Typography>

                        <Typography variant="subtitle1" color="textPrimary">
                            Primera habilidad:
                        </Typography>

                        <Typography variant="body1" color="textSecondary">
                            Impactrueno
                        </Typography>

                        <Typography variant="subtitle1" color="textPrimary">
                            Segunda habilidad:
                        </Typography>

                        <Typography variant="body1" color="textSecondary">
                            Rayo
                        </Typography>

                        </CardContent>
                    </div>
                </Card>
            </Box>
        </div>
    )
}

Como podria resolverlo? Los datos al hacer click ya los veo en consola.

Saludos y gracias de antemano!!

1 respuesta 1

1

La mejor forma sería pasarle al componente la prop con la el objeto que debe mostrar la información.

 export const Informacion = ({ pokemon }) => { ... }

Esta prop pokemon es algo que va a cambiar, por lo tanto es un estado de la aplicación que debe guardarse en el componente padre. Como el otro componente son filas de una tabla, lo mejor sería guardar el estado en el componente tabla en sí mismo y que se muestre de forma condicional el componente si existe algo seleccionado.

export const Pokes = () => {

    const [ pokeSelec, setPokeSelec] = useState({})

    const seleccionarFila = ( poke ) => {    
        setPokeSelec( poke );            
    }
return ( 
<>
       <Container maxWidth="md">
           <PokemonApi seleccionarFila={seleccionarFila} />                
           { pokeSelec && <Informacion pokemon={pokeSelec} />} 
        </Container>        
<>)

Debería actualizar pokemon api, o si lo quieres mñas pulido usar un useContext:

export const PokemonApi = ({seleccionarFila}) => {
....
...
{ filtrarPokemons && filtrarPokemons().map((infos, name) => <Lista 
key={name} info={infos} seleccionarFila={seleccionarFila}/>) }

Por último solo deberías pasar a tu componente fila la función seleccionarFila para poder cambiar el estado de la tabla.

export const Lista = ({ seleccionarFila, ...props}) => {...

Lo de arriba funcionaría pero todo esto se puede realizar con un contexto y quedaría más limpio, se recomienda crear el contexto en un fichero aparte y crear un hook específico para recuperarlo, pero de la forma más simple:

export const PokeContext = React.createContext();

export const Pokes = () => {
    
        const [ pokeSelec, setPokeSelec] = useState({})        
        
    return ( 
    <>
       <PokeContext.Provider value={{pokeSelec, setPokeSelec}}>
           <Container maxWidth="md">
               <PokemonApi />                
               { pokeSelec && <Informacion />} 
            </Container>   
       </PokeContext.Provider>     
    <>)

Los otros archivos debeérian recuperar el contexto para usarlo:

 export const Informacion = () => {
    const {pokeSelec, setPokeSelec} = useContext(PokeContext)
  ....
  }


export const Lista = (props) => { 
     const {pokeSelec, setPokeSelec} = useContext(PokeContext)
      ....
  }
7
  • Gracias por responder! El problema es que cuando llamo a mi componente Informacion en el componente Lista se renderiza la tarjeta 5 veces sobre la tabla, aun no entiendo muy bien de que manera podria evitar eso.
    – Nvidia99
    Commented el 23 jul. 2021 a las 19:08
  • Dado que el componente lista son varias filas si pones el componente informacion en la lista se generará por cada lista uno, por eso te recomendaba llamar al componente información en el componente tabla padre del que nacen los lista y hacerlo que solo salga si el estado no está vacío.
    – ivanph
    Commented el 23 jul. 2021 a las 19:14
  • Dado que en stackoverflow.com/questions/68504427/… has actualizado la información, la forma es poner el estado en el componente pokes y pasar el estado a informacion y el la funcion de cambiar PokemonApi.
    – ivanph
    Commented el 23 jul. 2021 a las 22:48
  • Que tal! No te entendi muy bien, lo que dices es que el estado: const [ pokeSelec, setPokeSelec] = useState({}) Lo debo de mover al componente Pokes y luego enviarselo al de información, pero la funcion de cambiar PokemonApi no comprendi que debo hacer con ella
    – Nvidia99
    Commented el 23 jul. 2021 a las 23:41
  • Por si quieres tener un mejor vistazo del codigo aqui esta el repositorio github.com/AndresW99/Poke-API como ultima opción utilizare redux, pero quiero hacerlo sin el.
    – Nvidia99
    Commented el 23 jul. 2021 a las 23:44

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.