CODEWITHSUNDEEP
reactjs
brohjoe
brohjoe

Reputation: 932

React re-rendering limit issues

I'm getting the error "Too many re-renders..." above and I'm trying to figure out what's wrong with the code. Based on what I've seen in the Chrome console, it appears the error is in the third party libraries, not what i've written here. If I'm wrong, please let me know. Here are my dependencies: "react": "^17.0.2", "react-dom": "^17.0.2", "react-icons": "^4.2.0", "react-scripts": "4.0.3", "web-vitals": "^1.1.2"

App.js

import {useState} from 'react'
import Header from './components/Header'
import Tasks from "./components/Tasks";

const App = () => {
    const [tasks, setTasks] = useState(
        [

        {
            id: 1,
            text: 'Doctor\'s appt',
            day: 'Feb 5th at 2:30p',
            reminder: true
        },
        {
            id: 2,
            text: 'Meeting at School',
            day: 'Feb 6 at 1:30p',
            reminder: true
        },
        {
            id: 3,
            text: 'Meeting at Church',
            day: 'Feb 7 at 6:30p',
            reminder: true
        }
        ]
    );

    // Delete Task
    const deleteTask = (id) => {
        // console.log('delete', id)
        //Takes in a function where for each task, filter the data where the task id is not
        //equal the the id. This deletes tasks when the 'x' is clicked.
        setTasks(tasks.filter((task) => task.id !== id))
    }

    //Toggle Reminder
    const toggleReminder = (id) => {
        setTasks(tasks.map((task) =>
            task.id === id ? {...task, reminder: !task.reminder } : task
            )
        )
    }

    return(
        <div className="container">
            <Header />
            {tasks.length >0 ? (
                <Tasks tasks={tasks}
                onDelete={deleteTask} onToggle={toggleReminder()} />
                ):(
                    'No Tasks to Show'
                )}
        </div>
    )
}

export default App

Tasks.js

import Task from './Task'
const Tasks = ({tasks, onDelete, onToggle}) => {
    return (
        <>
            {tasks.map((task) => (
                <Task key={task.id} task={task}
                onDelete={onDelete}
                onToggle={onToggle}/>
            ))}
        </>
    )
};

export default Tasks

Task.js

import {FaTimes} from "react-icons/fa";

const Task = ({task, onDelete, onToggle}) => {
    return (
        <div
             className={`task ${task.reminder && 'reminder'}`}
             onDoubleClick={() => onToggle(task.id)}>
            <h3>
                {task.text}<FaTimes style={{color:'red', cursor:'pointer'}}
                onClick={() => onDelete(task.id)}/>
            </h3>
            <p>{task.day}</p>
        </div>
    )
}

export default Task

Upvotes: 1

Views: 46

Answers (1)

Viet
Viet

Reputation: 12787

Because you call toggleReminder on render: onToggle={toggleReminder()}. Just update like this:

onToggle={toggleReminder}

Upvotes: 3

Related Questions