Как сделать так, чтобы при смене селекта менялось состояние чекбокса?

Question

[Sss109]

Дан селект с двумя значениями: 'отмечено' и 'не отмечено'. Дан также чекбокс. Нужно сделать так, чтобы при изменении значения селекта, чекбокс менял свое состояние с 'отмечено' на 'не отмечено' и наоборот.
С созданием проблем нет, не пойму как их связать.

constructor() {
    	super();
        this.state = {checked: true};
    	this.state = {
    		value: 0,
    		sost: [
    			'Отмечено',
    			'Не отмечено',
    			]
    		};
    	}
        handleSelectChange(event) {
        	this.setState({value: event.target.value});
        	}
	handleCheckboxChange(event) {
		this.setState({checked: !this.state.checked});
	}
	render() {
                const options = this.state.sost.map((item, index) => {
      	         return <option key={index} value={index}>{item}</option>;
      		});
		return <div>
      <select
				value={this.state.value}
				onChange={this.handleSelectChange.bind(this)}
			>
				{options}
	</select>
			<p>Состояние: {this.state.sost[this.state.value] ? 'Отмечено' : 'Не отмечено'}</p>
			<input
				type="checkbox"
				checked={this.state.sost}
				onChange={this.handleSelectChange.bind(this)}
			/>
		</div>;
	}

Answer 1

[0xD34F]

state = {
  value: 0,
  options: [ 'Не отмечено', 'Отмечено' ],
}

onChange = ({ target: t }) => {
  this.setState(() => ({
    value: +t[t.dataset.stateAttr],
  }));
}

render() {
  const { value, options } = this.state;

  return (
    <div>
      <select
        value={value}
        onChange={this.onChange}
        data-state-attr="value"
      >
        {options.map((n, i) => <option value={i}>{n}</option>)}
      </select>
      <br />
      <label>
        <input
          type="checkbox"
          checked={value}
          onChange={this.onChange}
          data-state-attr="checked"
        />
        {options[value]}
      </label>
    </div>
  );
}