Why is React not re-rendering on setState?

Question

I have a React project for a todo list. When you click to delete a task, it successfully sends the request to the API and removes the task from the database. After that, I request the tasks again and then setState with the new task list. After using setState, nothing updates on the website until you refresh the page.

What am I doing wrong? I'm brand new to React so any explanation, I would be very grateful for!

App.js:

import React from 'react';
import taskApi from "../api/task-api";
import TaskList from "./TaskList";
import {Button, Container} from "react-bootstrap";

class App extends React.Component {
    state = {
        tasks: [],
    }

    componentDidMount() {
        taskApi.get('/tasks').then(
            res => {
                const tasks = res.data.data;
                this.setState({tasks})
            }
        );

    }


    render() {
        return(
            <Container>
                <h1>Task Manager</h1>
                <Button variant="primary" size="lg" className="add-task-button">Add Task</Button>
                <TaskList tasks={this.state.tasks} />
            </Container>
        );
    }
}

export default App;

TaskList.js:

import React from 'react';
import Table from 'react-bootstrap/Table'

import TaskItem from "./TaskItem";

class TaskList extends React.Component {
    render() {
        return(
                <Table striped bordered hover>
                    <thead>
                        <tr key="header">
                            <th>ID #</th>
                            <th>Task Name</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    {this.props.tasks.map((task) => {
                        return <TaskItem task={task} key={task.id} />
                    })}
                    </tbody>
                </Table>
        );
    }
}

export default TaskList;

TaskItem.js:

import React from 'react';
import {Button, Modal} from "react-bootstrap";
import taskApi from "../api/task-api";


class TaskItem extends React.Component {

    constructor() {
        super();
        this.state = {
            show: false,
        };
    }

    showModal() {
        this.setState({show: true});
    }

    closeModal() {
        this.setState({show: false});
    }

    deleteTask(task_id) {
        this.setState({show: false});
        taskApi.delete('/task/' + task_id).then(()=>{
            taskApi.get('/tasks').then(
                res => {
                    const tasks = res.data.data;
                    this.setState({tasks})
                }
            );
            }
        );
    }

    render() {
        return(
                <tr>
                    <td>{this.props.task.id}</td>
                    <td>{this.props.task.task_name}</td>
                    <td>
                        <Button variant="success" className="task-action-button">Complete</Button>
                        <Button variant="secondary" className="task-action-button">Edit</Button>
                        <Button variant="danger" className="task-action-button" onClick={()=>{this.showModal()}}>Delete</Button>
                        <Modal show={this.state.show}>
                            <Modal.Header>Confirm</Modal.Header>
                            <Modal.Body>
                                Are you sure you want to delete this task?
                                <br/><br/>
                                <strong>Task:</strong>
                                <br/>
                                {this.props.task.task_name}
                            </Modal.Body>
                            <Modal.Footer>
                                <Button variant="secondary" onClick={()=>{this.closeModal()}}>Cancel</Button>
                                <Button variant="danger" onClick={()=>{this.deleteTask(this.props.task.id)}}>Delete</Button>
                            </Modal.Footer>
                        </Modal>
                    </td>
                </tr>
        );
    }
}

export default TaskItem;

CertainPerformance · Accepted Answer · 2022-08-16 02:20:33Z

1

Right now, you're doing

class TaskItem extends React.Component {
    deleteTask(task_id) {
        // ...
        this.setState({tasks})

You're setting state in TaskItem - but you never reference this.state.tasks in TaskItem. The tasks state exists in the parent, inside your class App. So, updating the state in the child component doesn't do anything - you need to update the state in the parent instead.

Put the methods that need to manipulate the parent's state in the parent, and then pass them down.

class App extends React.Component {
    deleteTask = (task_id) => {
        taskApi.delete('/task/' + task_id).then(()=>{
             // ...

App's render method:

<TaskList tasks={this.state.tasks} deleteTask={this.deleteTask} />

TaskList's render method:

return <TaskItem task={task} key={task.id} deleteTask={this.props.deleteTask} />

And finally in TaskItem:

deleteTask(task_id) {
    this.setState({show: false});
    this.props.deleteTask(task_id);
}

answered Aug 16, 2022 at 2:20

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Justin Simon Over a year ago

Hello @CertainPerformance, thank you so much for the explanation. This really made a lot of sense, and I was able to fix my code. Thank you again!

Collectives™ on Stack Overflow

Why is React not re-rendering on setState?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related