¿Cómo soluciono el siguiente código para que el estado del Grupo A se actualice y se represente correctamente? Al hacer clic, las personas del Grupo A deben pasar al Grupo B. Mi corazonada es algo con useEffect, pero no puedo pensar en una forma de implementar esto ya que aCopy solo existe dentro del controlador de clic.
código:
import React, { useEffect, useState } from "react"; export default function Test() { const [a, SetA] = useState(["Adam", "Brett", "Cody"]); const [b, SetB] = useState(["Donald", "Eric", "Fred"]); function click() { const aCopy = a; const mover = aCopy.pop(); SetA(aCopy); SetB((prev) => [...prev, mover]); } return ( <> <div>Group A: {a}</div> <div>Group B: {b}</div> <button onClick={click}>Click</button> </> ); }```Puede usar el método Array.prototype.filter() para filtrar el elemento en el que se hizo clic y eliminarlo de un grupo mientras usa el operador de extensión ( ... ) para agregarlo al otro grupo.
const handleClickA = (item) => { SetA((prevA) => prevA.filter((o) => o !== item)); SetB((prevB) => [...prevB, item]); };Esto funcionaría como quieras. Puede mover elementos entre los grupos como espera.
handleClickA y handleClickB son casi iguales. Puede reducir esto a una sola función si la información sobre el grupo también está disponible para cada artículo.
function Test() { const [a, SetA] = React.useState(["Adam", "Brett", "Cody"]); const [b, SetB] = React.useState(["Donald", "Eric", "Fred"]); const handleClickA = (item) => { SetA((prevA) => prevA.filter((o) => o !== item)); SetB((prevB) => [...prevB, item]); }; const handleClickB = (item) => { SetB((prevB) => prevB.filter((o) => o !== item)); SetA((prevA) => [...prevA, item]); }; return ( <div> <div> Group A:{" "} {a.map((itemA, indexA) => ( <button key={indexA} onClick={() => handleClickA(itemA)}> {itemA} </button> ))} </div> <div> Group B:{" "} {b.map((itemB, indexB) => ( <button key={indexB} onClick={() => handleClickB(itemB)}> {itemB} </button> ))} </div> </div> ); } ReactDOM.render(<Test />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>