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!!