CODEWITHSUNDEEP
javascriptreactjs
fluorspar
fluorspar

Reputation: 227

Checkbox not responding to onChange - React

I am trying to flip the state of checkboxes using the onChange event but I am unable to do so.I want to change the state of each checkbox on clicking them and I Since I am new to React, I need some help :') Here's my code:

App.js

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            todos: todoData
        }
        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>
        )    
    }
}

TodoItem.js: 

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>
    )
}

Upvotes: 1

Views: 238

Answers (1)

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11283

handleChange(id) {
        this.setState(prevState => {
            const todos = [...prevState.todos]
            const todo = todos.find(pr => pr.id === id);
            todo.completed = !todo.completed;

            return {
                todos
            }
        })
    }

Example

const todoData = [
  {
    id: 1,
    completed: false,
    text: 'test 1'
  },
  {
    id: 2,
    completed: false,
    text: 'test 2'
  }
]

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>
    )
}

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            todos: todoData
        }
        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>
        )    
    }
}

ReactDOM.render(
        <App />,
        document.getElementById('root')
      );
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

Upvotes: 1

Related Questions