Toggling todo completed flag with use Reducer

Question

I tried to convert my react-todo app from useState to useReducer , I made most of functionalities but toggling completed flag in my todos. I tried any possible solution but I couldn't solve it , please help me on this. what should I write in TOGGLE_TODO case to negate my completed Boolean?

Reducer Function :

const reducer = (state, action) => {
  switch (action.type) {
    case ACTIONS.setInputText:
      return { ...state, inputText: action.payload.value };
    case ACTIONS.ADD_TODO:
      if (state.inputText.trim()) {
        return {
          ...state,
          todos: [
            ...state.todos,
            { name: state.inputText, id: uuid.v4(), completed: false },
          ],
          inputText: "",
        };
      }
      return state;
    case ACTIONS.DELETE_TODO:
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.payload.id),
      };
    case ACTIONS.TOGGLE_TODO:

    default:
      return state;
  }

and here is my todo component

import React from "react";
import tdstyle from "../style/Todo.module.css";
import { ACTIONS } from "../App";
const Todo = ({ text, dispatch, todo }) => {
  return (
    <div className={tdstyle.listContainer}>
      <li>{text}</li>
      <div>
        <button
          onClick={() => {
            dispatch({ type: ACTIONS.DELETE_TODO, payload: { id: todo.id } });
          }}
        >
          X
        </button>
        <button
          onClick={() => {
            dispatch({ type: ACTIONS.TOGGLE_TODO, payload: { id: todo.id } });
          }}
        >
          V
        </button>
      </div>
    </div>
  );
};

export default Todo;

sorry i have question? i saw you pass dispatch as props.this is true? did not need this in comp? const [state, dispatch] = useReducer(reducer, initialState); — mostafa faryabi, Dec 06 '21 at 07:59
@mostafafaryabi there are 2 types of components , functional and class components. in class components which is using `extends.react` thing , yes you need it. but it is declining and this is new way to write — muller, Dec 06 '21 at 08:15
but how use hooks in class component? react docs says that use just in func comp — mostafa faryabi, Dec 06 '21 at 08:23
@mostafafaryabi well , actually I don't know , sorry. I only worked with functional components, it is easier and class components are becoming abandoned. — muller, Dec 06 '21 at 08:25

Lorenzo Fraterrigo Garofalo · Answer 1 · 2023-07-18T15:58:08.327

0

Try this:

 case "TOGGLE_TODO":
  return {
    ...state,
    todos: state.todos.map((todo) =>
      todo.id !== action.payload.id
        ? todo
        : { ...todo, completed: !todo.completed }
    ),
  };

edited Jul 18 '23 at 15:58

answered Jul 18 '23 at 15:57

Lorenzo Fraterrigo Garofalo

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 24 '23 at 10:26

Toggling todo completed flag with use Reducer

1 Answers1