Коллеги, что-то стопорнула меня задача, крутил ее с разных сторон, прошу помощи
В браузере в целом все работает, но в консоль мне не понятно как выводится данные(с задержкой как бы на 1 шаг)
и тест не проходит(скорей всего из-за этой задержки)
результат теста
Код AgeCheckBox.js
import React from "react";
function AgeCheckBox(props) {
const label = props.label;
const checked = props.checked;
const onChange = props.onChange;
return (
<div>
<label htmlFor={label}>{label}</label>
<input id={label} type="checkbox" checked={checked} onChange={onChange}></input>
</div>
);
}
export default AgeCheckBox;
Код App.js
import React from "react";
import AgeCheckBox from "./AgeCheckBox";
class App extends React.Component {
state = {
selectedAgeGroup: undefined,
ch1: false,
ch2: false,
ch3: false,
};
handleChange = (event) => {
if (event.target.checked === true) {
if (event.target.id === "18-25") {
this.setState({ ch1: true, ch2: false, ch3: false });
}
if (event.target.id === "26-35") {
this.setState({ ch2: true, ch1: false, ch3: false });
}
if (event.target.id === "36-50") {
this.setState({ ch3: true, ch1: false, ch2: false });
}
this.setState({ selectedAgeGroup: event.target.id });
console.log(this.state.selectedAgeGroup, this.state.ch1, this.state.ch2, this.state.ch3);
}
};
render() {
return (
<div>
<h2>What is your age?</h2>
<AgeCheckBox label="18-25" checked={this.state.ch1} onChange={this.handleChange} />
<AgeCheckBox label="26-35" checked={this.state.ch2} onChange={this.handleChange} />
<AgeCheckBox label="36-50" checked={this.state.ch3} onChange={this.handleChange} />
</div>
);
}
}
export default App;