Checkbox and state in React Js

Question

I am working on a checkbox and a textfield in React Js. Textfield works fine but my checkbox does not change its state from the one assigned in the constructor. I am not able to find any mistake in my method "handleChange". Kindly help

My component is

import React from "react"
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            name: "",
           work1: false
        }
        this.handleChange = this.handleChange.bind(this)

    } 
    handleChange(event) {
        const {name, value, type, checked} = event.target
        type === "checkbox" ? this.setState({[name]: checked}) :    this.setState({[name]: value})
    }
    render() {  
        return (
            <div className="todo-item">
                <input 
                    type="checkbox"
                    onChange = {this.handleChange}  
                    checked={this.state.work1}   
                />
                <input
                    type = "text" 
                    name= "name"
                    value= {this.state.name}
                    onChange={this.handleChange }

                />     
              <p >{this.state.name}</p>
            </div>
        )
    }
    }
export default App

It worked but as i am a beginner in React can u tell why is it important to use name — Moeez Atlas
– Moeez Atlas, Commented Feb 7, 2020 at 14:24
Because you're using the name to set the state. this.setState({[name]: checked}) — Brian Thompson
– Brian Thompson, Commented Feb 7, 2020 at 14:24
because you make use of if :D this.setState({[**name**]: checked}) — messerbill
– messerbill, Commented Feb 7, 2020 at 14:25

messerbill · Accepted Answer · 2020-02-07 14:26:11Z

5

You have not give the checkbox field name property like below

<input 
  type="checkbox"
  name="work1"
  onChange = {this.handleChange}  
  checked={this.state.work1}   
/>

edited Feb 7, 2020 at 14:26

messerbill

5,6391 gold badge31 silver badges39 bronze badges

answered Feb 7, 2020 at 14:21

Ashish

4102 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Checkbox and state in React Js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related