CODEWITHSUNDEEP
javascriptreactjssemantic-ui
Asif Mohammed
Asif Mohammed

Reputation: 1323

Why event.target.value is undefined?

I have two components named parent and child.

Child component contains checkbox's and it will send selected checkbox's values to Parent component

Child 

class Child extends Component{
  state = {
    options: [],
    selected_options: []
  }
  handleClose = (e) => {
    this.props.add(this.state.selected_options)
  }
  handleChange = (event) => {
    console.log(event.target.name);
    if(event.target.checked==true){
      event.target.checked=false
      this.state.selected_options.slice(this.state.options.indexOf(event.target.value),1)
    }
    else{
      event.target.checked = true
      this.state.selected_options.push(event.target.value)
    }
  }
  render() {
    return(
      <div>
        <Grid>
          {
            this.state.options.map(value => {
              return(
                    <Checkbox onChange={this.handleChange} label={value.name} value={value.name}   checked={false} />
              )
            })
          }
        <Button color='green' onClick={this.handleClose} inverted>
          <Icon name='checkmark' /> Apply
        </Button>
      </div>
    );
  }
}

and Parent Component

class Parent extends Component {
  constructor(props){
    super(props);
    this.state =  {
      selected_options:[],
    }
  }
  addOptions = (options) => {
    this.setState({
      selected_options: options
    })
  }
  render() {
    return(
      <div>
        <Child selected_options={this.state.selected_options} add={this.addOptions}  />
      </div>
    );
  }
}

When a checkbox is selected it must output its corresponding value in the console. but it showing undefined

Upvotes: 0

Views: 2439

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281942

Directly mutating the state or the event value is not the correct idea

You should be doing it like

class Child extends Component{
  state = {
    checkedState: []
    options: [],
    selected_options: []
  }
  handleClose = (e) => {
    this.props.add(this.state.selected_options)
  }
  handleChange = (index, value) => {
    var checkedState = [...this.state.checkedState];
    if(checkedState[index] === undefined) {
       checkedState.push(true)
    }
    else {
       if(checkedState[index] === true) {
             var selected_options=[...this.state.selected_options];
             var idx = selected_options.findIndex((obj) => obj.name == value)
             selected_options.splice(idx, 1);
             checkedState[index] = false
       } else {
          var selected_options=[...this.state.selected_options];
          selected_options.push(value);
       }
    }
    this.setState({checkedState, selected_options})
  }
  render() {
    return(
      <div>
        <Grid>
          {
            this.state.options.map((value, index) => {
              return(
                    <Checkbox onChange={() => this.handleChange(index, value.name)} label={value.name} value={value.name}   checked={this.state.checkedState[index] || false} />
              )
            })
          }
        <Button color='green' onClick={this.handleClose} inverted>
          <Icon name='checkmark' /> Apply
        </Button>
      </div>
    );
  }
}

and from the Parent render the child and not the Parent

Parent

render() {
    return(
      <div>
        <Child selected_options={this.state.selected_options} add={this.addOptions}  />
      </div>
    );
  }

Upvotes: 1

Related Questions