Failed prop type: You provided a `checked` prop to a form field without an `onChange` handler

Question

I have Candidate list as a parent and Candidate as a child. On Candidate list there is a Select All input so i bind function to it to set state if candidates are being selected and passing that state to child. That one part works but those inputs are not mutable by itself just by parent Select All can be changed.

This is what does it looks like:

CandidateList Component(Parent):

class CandidateList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      candidateList: null,
      candidateSelected: false
    }
  }

  onSelectCandidatesClick() {
    this.setState({
      candidateSelected: !this.state.candidateSelected
    });
  }

 render() {
    return (
      <div className="CandidateList">
        <div className="__selection">
          <input className="checkbox" type="checkbox" id="selectAll" onClick={() => this.onSelectCandidatesClick()}/>
          <label htmlFor="selectAll"><span id="__label">Select All</span></label>
        </div>
      </div>
    );
  }
}

Candidate Component(Child):

class Candidate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      candidateSelected: false
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      candidateSelected: nextProps.selectCandidate
    });
  }

  render() {
    return (
      <div className="Candidate">
        <div className="__select">
          <input className="checkbox" type="checkbox" id="candidate" data-candidate-id={this.props.candidateData.id} checked={this.state.candidateSelected} />
          <label htmlFor="candidate"></label>
        </div>
      </div>
    );
  }
}

Thanks for all suggestions and help.

Answer 1

You can set the checked value of the child based on the props.candidateSelected (if the select all was selected from the parent) or based on the state (if the checkbox was selected from the child)

You have to add an onclick event handler that will change the state when the checkbox in the child is clicked

class Candidate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      candidateSelected: false
    }
  }

  onSelectCandidatesClick() {
    this.setState({
      candidateSelected: !this.state.candidateSelected
    });
  }

  render() {
    return (
      <div className="Candidate">
        <div className="__select">
          <input className="checkbox" type="checkbox" id="candidate" data-candidate-id={this.props.candidateData.id} 
          onClick={() => this.onSelectCandidatesClick()}
          checked={this.state.candidateSelected || this.props.candidateSelected} />
          <label htmlFor="candidate"></label>
        </div>
      </div>
    );
  }
}

Answer 2

You need to give the checkbox input in your child component a way to process its change based on an input event.

<input checked={this.state.candidateSelected} onChange={e => {}} />

At the moment you're passing props in to say if it's checked or not so it can be an empty function.

Personally I think this is the wrong approach in any case. It's not an input because the user isn't inputting anything directly to that element.

Maybe you should have a prop called checked and if it is checked then show a check icon rather than an input.

{ this.props.checked ? <div className="checked"></div> : <div className="unchecked"></div>}

or something along those lines.