Estoy utilizando context para acceder a la data de una tabla, cuando seleccionas un elemento de la tabla su información se guarda en el context para luego renderizar la misma data en una tarjeta, el problema que tengo es que mientras no presione un elemento de la tabla no existe nada en el context, asi que oculto el componente si no hay nada, el problema es cuando ya obtengo la data el componente no se esta mostrando.
Aqui es donde condiciono el renderizado
export const Pokes = () => {
const {data} = userContext(UserContext);
return (
<Container maxWidth="md">
<PokemonApi />
{ (data) ? <Informacion /> : null }
</Container>
)
}
Tarjeta en donde renderizo la data una vez esta en el context Elimine unos cuantos atributos para que el codigo no se vea tan grande
export const Informacion = () => {
const userContext = useContext(UserContext);
const classes = useStyles();
return (
<div className={ classes.margen } >
<Box display="flex" justifyContent="center" alignItems="center" boxShadow={3} >
<Card className={classes.root}>
<CardMedia
className={classes.cover}
image={ userContext.data.result.sprites.front_shiny }
title="Live from space album cover"
/>
<div className={classes.details}>
<CardContent className={classes.content}>
<Typography component="h5" variant="h5">
{ userContext.data.result.name }
</Typography>
<Divider/>
<Typography variant="subtitle1" color="textPrimary">
Tipo:
</Typography>
<Typography variant="body1" color="textSecondary">
{ userContext.data.result.types[0].type.name }
</Typography>
</CardContent>
</div>
</Card>
</Box>
</div>
)
}
Guardado de info en el context
const { obtener } = useContext(UserContext);
const [, setPokeSelec] = useState([]);
// Extrae los datos de la tabla y setea en context
const seleccionarFila = ( poke ) => {
setPokeSelec( poke );
obtener(poke)
}
Y la funcion seleccionarFila la llamo en un boton
<Button
variant="contained"
color="primary"
size="small"
// Aqui extraigo la data de la tabla
onClick={ () => seleccionarFila( props.info ) }
>
Seleccionar
</Button>
Context provider
function App() {
// Estado en donde se guardara el context
const [data, setData] = useState({});
const obtener = (value) => {
setData({ ...data, result:value })
}
return (
<UserContext.Provider value={{
data,
obtener
}}>
<ThemeProvider theme={ theme }>
<AppRouter />
</ThemeProvider>
</UserContext.Provider>
)
; }
Asi que cual sería la manera correcta de que se renderize el componente en el instante en que el context reciba la data?