0

Buen dia, estoy usando react, quiero intentar llenar un div con un array del cual obtengo la información de mi base de datos, logro llenar el div izquierdo, pero si selecciono el componente se vuelve a llenar el div, la idea es que cuando seleccione el elemento, le de agregar y me lo mande al lado derecho y no se vuelva a llenar. adjunto codigo y fotos

Parte grafica

Items

import React from 'react'
const Items = ({}) => {
    const handleClic = () => {
        handleClick(value)
    }

    return (
        <li className={selected ? 'selected' : ''} onClick={handleClic}>{value}</li> 
} 

export default Items

Selects

import React, {useState, useEffect} from 'react'
import Items from './Items'
import {optionservice} from '../../../services/optionservice'

const Selects = () => {
    const [stateOptions, setStateOptions] = useState([])
    const [options, setOptions] = useState(options)
    const [arreglo1, setArreglo1] = useState()
    const [arreglo2, setArreglo2] = useState(null) 

    useEffect(() => {
        setTimeout(() => {
            optionservice.getAll().then(response => {
                setStateOptions(response) 
            }
        }, 1000)
    }, [])

    const handleSelect = (selectedVal) => {
        setSelected(selectedVal !== selected ? selectedVal: null)
    }

    const handleAdd = () => {
        if (arreglo1.includes(selected)) {
            setArreglo1(arreglo1.filter(val => val !== selected).sort())
            setArreglo2([...arreglo2, selected].sort())
            setSelected(null)         
        }        
    }   

    const handleRemove = () => {
        if (arreglo2.includes(selected)) {
            setArreglo1([...arreglo1, selected].sort())
            setArreglo2(arreglo2.filter(val => val !== selected).sort())
            setSelected(null)         
        }        
    }      

    return (
        <>
            <h1>Asignación de páginas</h1>
            <section>
                <div>
                    <ul>
                        {arreglo1.map(val => {
                            return (
                                <Items 
                                    key={val}
                                    handleClick={handleSelect}
                                    value={val}
                                    selected={selected === val} 
                                />
                            )
                        })} 
                    </ul> 
                </div>
                <div>
                    <button onClick={handleAdd}>Agregar</button>
                    <button onClick={handleRemove}>Remover</button>
                </div>
                <div>
                    <ul>
                        {arreglo2.map(val => {
                            return (
                                <Items 
                                    key={val}
                                    handleClick={handleSelect}
                                    value={val}
                                    selected={selected === val} 
                                />
                            )
                        })} 
                    </ul> 
                </div>
            </section> 
        </>
    )

}

export default Selects
1
  • 2
    Por favor, no uses imágenes de código. Edita tu pregunta y agrega tu código en formato de texto. Commented el 26 nov. 2021 a las 3:33

1 respuesta 1

0

En la línea 17 de tu componente Selects estás mutando directamente tu state options. No deberías hacer esto si no que deberías usar su setOptions correspondiente.

Ya que el valor de arreglo1 depende de options que a su ves depende de stateOptions, dentro de tu useEffect en la línea 11, deberías llamar también a setArreglo1 y setOptions y asignarle sus valores correspondientes.

const [stateOptions, setStateOptions] = useState([]);
const [options, setOptions] = useState([]);
const [arreglo1, setArreglo1] = useState([]);

useEffect(() => {
  setTimeout(() => {
    optionservice.getAll().then(response => {
      setStateOptions(response);
      const options = response.map(i => i.menuItemName);
      setOptions(options);
      setArreglo1(options);
    });
  }, 1000);
}, []);

...

También podrías eliminar stateOptions y options ya que por lo visto solo los usas como valores intermediarios para terminar seteando el valor de arreglo1, en ese caso podrías borrar la declaración de esos 2 state y también sus llamadas a sus setState correspondientes dentro del useEffect.

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.