Unable to get data from GetMapping - Class Components

Question

I have a class component wherein the data is fetched from the backend and it should render it on the frontend. I have used drag and drop feature of react-beautiful-dnd. Can someone please tell where am I going wrong. Nothing gets rendered. Thank you in advance :)

class List extends Component {
    state = {
        users: {}
    }
    componentDidMount() {
        axios.get("http://localhost:8083/getmodules")
            .then(res => {
                this.setState({
                    users: res
                });
            })
    }
onDragEnd = result => {
        const { destination, source, reason } = result;
        // Not a thing to do...
        if (!destination || reason === 'CANCEL') {
            return;
        }

        if (
            destination.droppableId === source.droppableId &&
            destination.index === source.index
        ) {
            return;
        }

        const users = Object.assign([], this.state.users);
        const droppedUser = this.state.users[source.index];


        users.splice(source.index, 1);
        users.splice(destination.index, 0, droppedUser);
        this.setState({
            users
        });
    }

    renderUsers = (item, index) => {
        return <Draggable
            key={index}
            draggableId={index + ' '}
            index={index}>

            {(provided) => (
                <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                >
                    <div className='item'>
                        <div>{index + 1}</div>
                        <div>{item.moduleType}</div>
                        <div className='name'>
                            <div>{item.moduleName}</div>
                            <div>{item.duration}</div>
                        </div>
                    </div>
                </div>
            )}
 </Draggable>
    }
    render() {
        return (<DragDropContext onDragEnd={this.onDragEnd}>
            <div className='container'>
                <div className='users'>
                    <h1>Reorder to Set The Timeline</h1>
                    <Droppable droppableId="dp1">
                        {(provided) => (
                            <div ref={provided.innerRef} {...provided.droppableProps}>
                                {this.state.users.map(this.renderUsers)}
                                {provided.placeholder}
                            </div>
                        )}
                   </Droppable>
                 </div>
             </div>
        </DragDropContext>);
    }
}
export default List;

Below is the given output of the get request :

[
    {
        "module_id": 1,
        "module_type": "Pre-Reading",
        "module_name": "Pre-Reading",
        "duration": 120,
        "course": {
            "course_id": 1,
            "course_name": "AWS"
        }
    },
    {
        "module_id": 2,
        "module_type": "Instructional",
        "module_name": "Introduction and Course Overview",
        "duration": 30,
        "course": {
            "course_id": 1,
            "course_name": "AWS"
        }
    }
]

Can you add your code [here](https://react.new/). Its hard to tell from this — Shubham Verma, Dec 24 '20 at 06:29

score 0 · Answer 1 · answered Jan 01 '21 at 12:29

In your List component your initialization of state is wrong, users should be array and not object, because your response sample is an array.

Update the state initialization as below

class List extends Component {
    state = {
        users: []
    }
    ....
    ....
}

You can check the working example of your code here https://codesandbox.io/s/brave-rain-66wnx?file=/src/List.js

Unable to get data from GetMapping - Class Components

1 Answers1