Q:

React: How to link a checkbox with an input date field?

I am a beginner in React and following is my problem:
I have a Date field and an Expired checkbox field next to it. When the user checks the Expired checkbox, the date field should be disabled. The state should then record true if the user checks the Expired field rather than the date.
I can keep those two fields separate. But I do not know (a) how to diable the date field when checkbox is checked and (b) Record the state as true in place of a date variable when checkbox is checked.
Inside the render, I have the following code (using Bootstrap):
<div className="row m-1">
  <div className="col-xs-4 col-lg-4 col-sm-4 col-md-4 pl-2">
    <label htmlFor="ExampleFormControlInput m-1">
      Date
    </label>
  </div>

  <div className="col-xs-4 col-lg-4 col-sm-4 col-md-4 pl-1">
    <input
      className="form-control form-control-sm"
      type="date"
      style={{ width: "100%" }}
      min={moment(new Date()).format('YYYY-MM-DD')}
      onChange={(e) => this.handleInputChange(e, "lst_dt")}
      value={this.state.userData.validity}
    /></div>

  <div className="col-xs-2 col-lg-2 col-sm-2 col-md-2 mt-1">
    <label htmlFor="ExampleFormControlInput m-1">
      Expired
    </label>
  </div>

  <div className="col-xs-1 col-lg-1 col-sm-1 col-md-1 ">
    <input
      className="form-control form-control-sm"
      type="checkbox"
      style={{ width: "auto" }}
      onChange={(e) => this.handleInputChange(e, "expiry")}
      value={this.state.userData.expired}
    />
  </div>
</div>

In extends Component part of the code, I have the following:
state = {
  userData: {
    lst_dt: "",
    expiry: false,
  },
  error: false,
};

In handleInput, I have the following:
handleInputChange = (e, name) => {
  let value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
  this.setState({
    userData: { ...this.state.userData, [name]: value },
  });
};

In FormReset, I have the following:
handleFormReset = () => {
  this.setState({
    userData: {
      validity: "",
      expired: false,
    },
    error: false,
  });
};

A:

To disable the date field -
<input type="date" disabled={this.state.userData.expired}/>

To Record the state as true in place of a date variable when checkbox is checked -
handleInputChange = (e, name) => {
  let value = e.target.type === 'checkbox' ? e.target.checked :
    e.target.value;
  this.setState({
    userData: { ...this.state.userData, [name]: value },
  });
  if (e.target.type === 'checkbox' && e.target.value) {
    this.setState({
      userData: { ...this.state.userData, validity: true },
    });
  }
};

