React - предупреждение You provided a `checked` prop to a form field without an `onChange` handler
Только начинаю изучать react, пробую создать список чекбоксов, в котором есть один исключающий вариант. Т.е. при клике на него, остальные чекбоксы должны очиститься.
class Checkbox extends React.Component {
constructor(props){
super(props);
this.state = {
checked: Array(this.props.answ.length).fill(false)
}
this.exclusive = this.props.answ.map((el) => el.excl || false)
}
handleClick(curr){
const arr = this.state.checked;
arr[curr] = !arr[curr];
if (arr[curr]){
for (let i = 0; i< arr.length; i++){
if (i !== curr){
if (this.exclusive[curr] || (!this.exclusive[curr] && this.exclusive[i])){
arr[i] = false;
}
}
}
}
this.setState({
checked: arr
});
}
render() {
const answ = this.props.answ.map((el, i) => {
return (
<div className="row_label" key={`${this.props.name}_${el.r}`}>
<input
type="checkbox"
name={`${this.props.name}_${el.r}`}
id={`${this.props.name}_${el.r}`}
value="1"
checked={this.state.checked[i]}
onClick = {() => this.handleClick(i)}
/>
<label htmlFor={`${this.props.name}_${el.r}`} dangerouslySetInnerHTML={{ __html: el.lab }} />
</div>
);
});
return (
<>
{answ}
</>
)
}
}
Все работает как надо, но в консоле появляется предупреждение:
Warning: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.
Подскажите, пожалуйста, что я неправильно делаю? Мне не нужно onChange. Я могу заменить обработку onClick на onChange, тогда ошибка пропадает. Является ли это хорошим вариантом или нужно как-то по-другому писать?