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
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