1

tengo el siguiente problema, he creado una API REST y me he traido los datos al Front con React, el caso es que como se ve en el codigo he iterado los options y lo que quiero es usar uno o multiples useState para cambiar el valor de una imagen, (cada option contiene como se puede ver un id, title e image)

options.map( ({_id, title, selectId, image}) => (
                    (data._id === selectId) ?
                        <div key={_id} className="options">
                           <input type="radio" id={_id} name={selectId} value={title}/>
                           <label for={_id} onClick={ () => setValor1(image) }>{title}</label>
                        </div>
                    : null
                                ))
<img src={valor1}></img>

Quiero poner que cada option, al seleccionarlo se cambie de imagen, pero cada option esta metido en un contendor padre, llamado select, ahi podeis ver que hace una pequeña condicion a la hora de imprimir las options, por lo que si selecciono un option que esta dentro del select 01, me deberia de mostrar esa imagen, pero si selecciono otro option de otro select, me deberia de mostrar tambien esa imagen, las 2.

Ahora mismo me muestra la ultima que haya seleccionado, me muestra el Option 02 del Select 01, pero como puedo hacer para mostrar la imagen tanto esta del Option 02 del Select 01 como para que me muestre la del Option 01 del Select 02 ?? Cual seria la mejor forma ??

introducir la descripción de la imagen aquí

1 respuesta 1

0

Usa la posición del array que trae las opciones para designar una imagen a mostrar según la opción seleccionada.

//La data que podría traer un fetch
const fetchedData = [
  { _id: 1, title: "Image1", image: "image_url1" },
  { _id: 2, title: "Image2", image: "image_url2" },
]
//...

const [images, setImages] = useState([]);
const [loaded, setLoaded] = useState(false);
const [options, setOptions] = useState([]);

useEffect(() => {
  if(!loaded){
    setLoaded(true);
    setOptions(fetchedData);
    const selectedImages = fetchedData.map(item => "" ); //["", ""]
    setImages(selectedImages);
  }
},[]);

const selectImage = (imageUrl, index) => {
  const updatedImages = images.map((item, i) => i == index ? imageUrl : item );
  setImages(updatedImages);
}

Entonces debes agregar el index en tu map de options

options.map( ({_id, title, selectId, image}, index) => (
  (data._id === selectId) ?
    <div key={_id} className="options">
      <input type="radio" id={_id} name={selectId} value={title}/>
      <label for={_id} onClick={ () => selectImage(image, index) }>{title}.</label>
    </div>
    : null
  )
)

Y tus imágenes deberán mostrarse de esta manera

{images.map((img, i) => (img != "" ? <img key={i} src={img}></img> : null)}

Ahora lo más probable es que quieras también controlar los valores de los input. Para ese caso repite lo de la imagen y fusiona la función de selectImage() para enviarle el value del input que quieras enviar a backend.

Una opción a esto último para obtener un array de los valores seleccionados:

const optionsSelected = options.filter((opt, i) => images[i] != "" );
1
  • Lo probaré, gracias por responder Commented el 10 ago. 2021 a las 11:27

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.