React update state of check box programmatically without clicking on it at the time of component creation

Question

i am trying to create a state full dialog box which has multiple check boxes. what i am doing is when user close the dialog box i save the state of dialog box into the local storage and when user open it again i get the item from local storage but unable to update the state properly.

this is what is happening: when user first time open dialog box all the check boxes are unchecked and user choose some of them and check them and close the dialog box when he close the dialog box it gets dies so when user open it again all the check boxes are again unchecked. what i want is: when user open dialog box again it should have previously check boxes as checked. how i am trying: So when user close the check box i save the state in local storage so when user will open it again i will set the state so the previously checked boxes remain checked.it's not working Thanks in Advance!!!

    import React, { Component } from 'react';

class FilterPanel extends Component {
  constructor(props) {
    super(props);
            this.state = {
                active: [],
                filters: []
            };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmission = this.handleSubmission.bind(this);
  }

  //////////////////////////////////////retrieving from local storage
  componentDidMount(){

    this.setState(JSON.parse(localStorage.getItem('checks')));
    }
    //////////////////////////////////////////////saving state in local storage
    componentWillUnmount(){
      localStorage.setItem('checks',JSON.stringify(this.state));
    }
  handleChange(event) {
      this.setState({ [event.target.id]: (this.state[event.target.id] === null || this.state[event.target.id] === undefined) ? true : !this.state[event.target.id] });
      this.setState({ active: {[event.target.id]: (this.state.active[event.target.id] === null || this.state.active[event.target.id] === undefined) ? true : !this.state.active[event.target.id] }});
      if (this.state.filters.includes(event.target.id)){
          var toremove = this.state.filters.indexOf(event.target.id);
          this.state.filters.splice(toremove, 1);
          console.log("this is the state in handle1");
          console.log(this.state);
      }
      else
        {
          this.state.filters.push(event.target.id);
            console.log("this is the state in handle2");
            console.log(this.state);
      }

      console.log("this is the event.target.id");
      console.log([event]);
  }
  handleSubmission(event) {
    this.props.handleFilters({[this.props.id]: Object.keys(this.state.active)})
    this.props.handler(false);
    event.preventDefault();
  }

  render() {
    const header = <div className='modal-header'><h5 className='modal-title'>{this.props.title}</h5><button type='button' className='close' aria-label='Close' onClick={() => this.props.handler(false)}><span aria-hidden='true'>&times;</span></button></div>;
    const options = this.props.options.map(option => {
      return (
        <div className='form-check'>
          <label className='form-check-label'>
            <input className='form-check-input' type='checkbox' id={option} value={option} onChange={this.handleChange}/> {option}
            <span className='form-check-sign'>
              <span className='check'></span>
            </span>
          </label>
        </div>
      )
    });

    return (
      <form onSubmit={this.handleSubmission}>
        <div className='modal fade show' style={{ display: 'block', overflow: 'auto' }} tabIndex='-1' role='dialog' aria-labelledby='ModalLabel' aria-hidden='true'>
          <div className='modal-dialog' role='document'>
            <div className='modal-content'>
              {header}
              <div className='modal-body'>
                <div className='backtittle'>
                  <h6 style={{padding:'5px' }}>{this.props.description}</h6></div>
                    {options}
                  </div>
              <div className='modal-footer justify-content-center'>
                <input className='btn btn-primary-filters btn-sm' type='submit' value='Filtrar'  />
                <button type='button' className='btn btn-primary-filters btn-sm'  onClick={() => this.restoreFilters()}>Eliminar TODOS los filtros</button>
              </div>
            </div>
          </div>
        </div>
      </form>
    );

  }

}
export default FilterPanel;

Answer 1

You need to set the checkbox value from the state.

See controlled components docs.

Try adding the checked prop to the input field and fill its value from the state.

Something like this:

<input
  className='form-check-input'
  type='checkbox'
  id={option}
  value={option}
  onChange={this.handleChange}
  checked={this.state.active[option]}
/>