How to make checkbox toggle in reactjs app ? not working with my code

Question

I am getting into reactjs and building a simple Todo app like shown below. However when I try to toggle checkbox they don't toggle and also no compile error is shown.

1. Used the following command to create app  
command: npx create-react-app test-app

* Folder Structure
  - node_modules
  - publics
  - src
     - App.css
     - App.js
     - App.test.js
     - index.css
     - index.js
     - TodoItem.js --
     - todosData.js --
     - ....

I have made changes to only 3 files. They are App.js, TodoItems.js, todosData.js. All of the code in pasted blow.

App.js

import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            todos: todosData
        }
        this.handleChange = this.handleChange.bind(this)
    }
    
    handleChange(id) {
        this.setState(prevState => {
            const updatedTodos = prevState.todos.map(todo => {
                if (todo.id === id) {
                    todo.completed = !todo.completed
                }
                return todo
            })
            return {
                todos: updatedTodos
            }
        })
    }
    
    render() {
        const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>)
        
        return (
            <div className="todo-list">
                {todoItems}
            </div>
        )    
    }
}

export default App

TodoItems.js

import React from "react"

function TodoItem(props) {
    return (
        <div className="todo-item">
            <input 
                type="checkbox" 
                checked={props.item.completed} 
                onChange={() => props.handleChange(props.item.id)}
            />
            <p>{props.item.text}</p>
        </div>
    )
}

export default TodoItem

todosData.js

const todosData = [
    {
        id: 1,
        text: "Take out the trash",
        completed: true
    },
    {
        id: 2,
        text: "Grocery shopping",
        completed: false
    },
    {
        id: 3,
        text: "Clean gecko tank",
        completed: false
    },
    {
        id: 4,
        text: "Mow lawn",
        completed: true
    },
    {
        id: 5,
        text: "Catch up on Arrested Development",
        completed: false
    }
]

export default todosData

pilchard · Accepted Answer · 2020-08-24 15:34:14Z

Here's a quick working snippet illustrating a functional implementation of your setup.

It passes a callback to setState and uses Array.find() to get a reference to the todo that we want to change based on the passed id.

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<div id="App"></div>
<script type="text/babel">
  const { useState} = React;
  const todosData = [
    {
        id: 1,
        text: "Take out the trash",
        completed: true
    },
    {
        id: 2,
        text: "Grocery shopping",
        completed: false
    },
    {
        id: 3,
        text: "Clean gecko tank",
        completed: false
    },
    {
        id: 4,
        text: "Mow lawn",
        completed: true
    },
    {
        id: 5,
        text: "Catch up on Arrested Development",
        completed: false
    }
];

function App() {
    const [todos, setTodos] = useState(todosData);

    const handleChange = (id) => {
      setTodos(prevTodos => {
        const todo = prevTodos.find(todo => todo.id === id);
        todo.completed = !todo.completed;
        return [...prevTodos];
      });
    }
  
    return (
      <div className="todo-list">
        {todos.map(item => <TodoItem key={item.id} item={item} handleChange={handleChange} />)}
      </div>
    )    
}

function TodoItem({item, handleChange}) {
    return (
        <div className="todo-item">
            <input 
                type="checkbox" 
                checked={item.completed} 
                onChange={() => handleChange(item.id)}
            />
            <p>{item.text}</p>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('App'));

 </script>

mfelixson · Accepted Answer · 2020-08-24 14:20:02Z

You are not passing the actual input/checkbox value to the state, which simplifies your work as against implementing the value change yourself.

import React from "react"

function TodoItem(props) {
    return (
        <div className="todo-item">
            <input 
                type="checkbox" 
                checked={props.item.completed} 
                onChange={val=> props.handleChange(props.item.id, val.target.checked)}
            />
            <p>{props.item.text}</p>
        </div>
    )
}

export default TodoItem

Also make a slight change to the handleChange to take both the id and value

handleChange(id, val) {
        this.setState(prevState => {
            const updatedTodos = prevState.todos.map(todo => {
                if (todo.id === id) {
                    todo.completed = val
                }
                return todo
            })
            return {
                todos: updatedTodos
            }
        })
    }

Armen · Accepted Answer · 2020-08-24 15:53:24Z

1

You can handle you state like this

handleChange = (id) => {
      const currState = {
         ...this.state,
      };
      const upgratedTodo = currState.todos.map((todo) => {
         if (todo.id === id) {
            todo.completed = !todo.completed;
         }
         return todo;
      });
      this.setState({
        todos: upgratedTodo,
      })
   };

answered Aug 24, 2020 at 15:53

Armen

893 bronze badges

Collectives™ on Stack Overflow

How to make checkbox toggle in reactjs app ? not working with my code

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related