Home / Questions / 563372
Accepted
Naidamag
Asked: 2022-10-21 09:24:23 +0800 CST 2022-10-21 09:24:23 +0800 CST

Transform a class component into a functional one

  • 772

I have this class component and I need to apply this code in a functional component, I don't know how to convert the state using useState. My question is if I have to generate two states or in one I can only pass the object and the empty array. How would the state...

Since I need to add an empty array to move the elements to that new array and here, from what I see, everything is in a single state, both the data and the empty array. How can I transform that to a functional component

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>
        )
    }
}
reactjs

1 Answers

  1. Best Answer

    It is in a single state since it reactonly componentesupports one state, which must be one objetoin which you store all the information. In reacthow functionsthe being hookscan be separated, so you can do without problems.

    const [list1, setList1] = useState([
    { id: "1", name: "shrek" },
    { id: "2", name: "Nelson" },
    { id: "3", name: "Prueba" }
]);
const [list2, setList2] = useState([]);
    • 0