0

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?

2
  • ¿Como se esta seleccionando y guardando en el context? Compartenos esa pieza de código, saludos
    – g.4
    Commented el 24 jul. 2021 a las 13:54
  • @g.4 Listo ya edite el post, como podria solucionarlo? O que hice mal? Saludos!!
    – Nvidia99
    Commented el 25 jul. 2021 a las 0:34

1 respuesta 1

0

Este post se parece mucho al tema que se está tratando en https://es.stackoverflow.com/questions/470748/como-enviar-los-datos-de-un-componente-a-otro-al-hacer-click-en-un-botón-react/ . Ahí ya he puesto como sería trabajando con contextos. En cuánto al tema aquí tratado, al menos en el código mostrado no estás llamando a useContext si no a userContext, por lo que data será indefinido.

export const Pokes = () => {
   const {data} = userContext(UserContext); // NO
   const {data} = useContext(UserContext); // SI

Recomiendo no usar un condicional ternario que devuelva null, si no mejor:

{ (data) && <Informacion /> } 

Este estado no tiene ningún uso aquí presente:

const [, setPokeSelec] = useState([]);

No acabo de entender porque guardas en obtener una copia de la data en:

setData({ ...data, result:value })

En ningún momento añades otra cosa a la data, podría resumirse en:

setData({ result:value })

y quitando el result(mas limpio):

setData(value)

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.