Reactjs cambiar estado "false" a un conjunto de elementos
Publicado por r3is3rsf (1 intervención) el 16/08/2022 07:32:15
Un saludo a todos, soy nuevo usando reactjs y participando en el foro. Tengo un componente hijo en reactjs que se carga varias veces en un componente principal, se trata de un conjunto de imágenes, se llama al componente y se envía la imagen y una información correspondiente a la imagen, al hacer click sobre la imagen muestra la información de esa imagen.
El mostrar la información de la imagen lo hice con un onClick que cambia un useState con un valor inicial en false a true, lo que quiero lograr es que al cliquear una segunda imagen muestre la información de la imagen clickeada y que oculte la información de las que hayan sido clickeadas antes. El useState "mostrar" esta en false, al hacer click se llama la funcion "mostrar info", la cual lo cambia a true mostrando la info que llega por props. El componente es llamado varias veces, aunque carge una sola imagen por ves, a cada una le funciona el onClick y muestra la info son problemas.
El asunto es cambiar las anteriores a false para que solo se muestre la información de una por ves. Cualquier información es bien recibida. Trate de hacer uso de un useEffect que cambie todo lo que se esta renderizando a false cuando se modifica el useState mostrar, pero aplica en false a todas la imagenes y el onClick no hace nada.
Los valores que recibo por props del componente principal son la imagen que se mostrara, un id y la información de la imagen.
Saludos y adjunto un como es la lógica del component donde estoy mostrando las imagenes. Cualquier sugerencia o ayuda es bien recibida.
He probado agregando el cambio de valor en un useEffect sin resultado, al hacerlo todos quedan en false. La idea que tenia es que el useEffect que se ejecute de forma general por asi decirlo marque todo el false y luego sobre la que se hizo click cambie a true. Aunque no me esta funcionando.
El mostrar la información de la imagen lo hice con un onClick que cambia un useState con un valor inicial en false a true, lo que quiero lograr es que al cliquear una segunda imagen muestre la información de la imagen clickeada y que oculte la información de las que hayan sido clickeadas antes. El useState "mostrar" esta en false, al hacer click se llama la funcion "mostrar info", la cual lo cambia a true mostrando la info que llega por props. El componente es llamado varias veces, aunque carge una sola imagen por ves, a cada una le funciona el onClick y muestra la info son problemas.
El asunto es cambiar las anteriores a false para que solo se muestre la información de una por ves. Cualquier información es bien recibida. Trate de hacer uso de un useEffect que cambie todo lo que se esta renderizando a false cuando se modifica el useState mostrar, pero aplica en false a todas la imagenes y el onClick no hace nada.
Los valores que recibo por props del componente principal son la imagen que se mostrara, un id y la información de la imagen.
Saludos y adjunto un como es la lógica del component donde estoy mostrando las imagenes. Cualquier sugerencia o ayuda es bien recibida.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React, { useState, useEffect } from 'react';
const ComponentHijo = (props) => {
const [mostrar, setMostrar] = useState(false);
const MostrarInfo = () => {
setMostrar(current => !current);
};{props.image && (
<div onClick={() => {
MostrarInfo();
}}
><img src={props.imagen} />
{mostrar &&(
<div>
{props.label}
</div>
)}
</div>
)}
He probado agregando el cambio de valor en un useEffect sin resultado, al hacerlo todos quedan en false. La idea que tenia es que el useEffect que se ejecute de forma general por asi decirlo marque todo el false y luego sobre la que se hizo click cambie a true. Aunque no me esta funcionando.
Valora esta pregunta
0