저는 강의랑 다르게 checkbox에 evntlistener을 달지않고 row에 이벤트 위임으로 달았습니다.
각각의 checkbox에 id로 Continent.value를 넣었습니다.
문제는 7번째 줄 else 부분에서 제 의도랑 다르게 동작하내요.
뭐가 잘못된걸까요??ㅠ
function CheckBox() {
const [checked, setChecked] = useState([]);
const funcCheck = (e) => {
if (e.target.checked) {
setChecked(checked.concat(e.target.id));
} else {
setChecked(checked.splice(checked.indexOf(e.target.id, 1)));
}
};
console.log(checked);
const renderCheckbox = () =>
Continents.map((v, i) => (
<Col span={8} key={i}>
<Checkbox id={v.value} key={i}>
{v.value}
</Checkbox>
</Col>
));
return (
<div>
<Collapse>
<Panel header="Continent">
<Row onClick={funcCheck}>{renderCheckbox()}</Row>
</Panel>
</Collapse>
</div>
);
}