0

Tengo este componente de clase y necesito aplicar este codigo en un componente funcional, no se bien como convertir el estado usando useState. Mi pregunta es si tengo que generar dos estados o en uno solo puedo pasar el objeto y el array vacio. Como quedaría el estado...

Ya que necesito agregar un array vacio para mover los elementos a ese nuevo array y aqui por lo que veo esta todo en un solo estado, tanto los datos como el array vacio. Como puedo transformar eso a un componente funcional

import React, { Component } from 'react'
import { ReactSortable } from "react-sortablejs";

export default class List2 extends Component {
    state = {
        list: [
            { id: "1", name: "shrek" },
            { id: "2", name: "Nelson" },
            { id: "3", name: "Prueba" }
        ],
        list2: []
    };
    render() {
        return (
            <div class="container">
                <div className="row align-items-start ">
                    <div className="col bg-success">
                    <h6 className="text-center">lista 1</h6>

                    <ReactSortable
                            list={this.state.list}
                            setList={newState => this.setState({ list: newState })}
                            group="shared-group-name"
                        >
                            {this.state.list.map(item => (
                                <div key={item.id}>
                                    <div className="card  m-3 cursor-draggable" >
                                        <div className="card-body">
                                            {item.name}
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </ReactSortable>

                     </div>


                    <div class="col bg-danger">
                        <h6 className="text-center">lista 2</h6>

                        <ReactSortable
                            list={this.state.list2}
                            setList={newState => this.setState({ list2: newState })}
                            group="shared-group-name"
                        >
                            {this.state.list2.map(item => (
                                <div key={item.id}>
                                    <div className="card m-3 cursor-draggable" >
                                        <div className="card-body ">
                                            {item.name}
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </ReactSortable>

                    </div>
                    <div className="col mt-3">
                        <h6>Puedas intercambiar datos entre la lista 1 y 2</h6>
                   </div>
                </div>
            </div>
        )
    }
}

1 respuesta 1

0

Esta en un solo estado dado que react como componente solo soporta un estado, el cual debe ser un objeto en el cuál almacenas toda la información. En react como functions al ser hooks pueden estar separados, por lo que puedes hacer sin problemas.

const [list1, setList1] = useState([
    { id: "1", name: "shrek" },
    { id: "2", name: "Nelson" },
    { id: "3", name: "Prueba" }
]);
const [list2, setList2] = useState([]);
1
  • Gracias, exactamente eso queria saber si se podia hacer... Ya me salio lo que queria.
    – Ndmo
    Commented el 20 oct. 2022 a las 20:48

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.