Изначально отправляю массив объектов чтобы вывести список чекбоксов.
<Checkbox checkboxProps = {checkboxButtonsDataArr}/>
Нужно чтобы на выходе внутри <form></form>
было 3 <label></label>
Массив с пропсами:
[
{id: 1, title: 'Тест 1', name: 'name1', checked: false},
{id: 2, title: 'Тест 2', name: 'name2', checked: false},
{id: 3, title: 'Тест 3', name: 'name3', checked: true}
]
Компонент:
interface IChecked {
id: number;
title: string;
name: string;
checked: boolean;
}
interface ICheckedArr {
checkboxProps: IChecked[];
}
const Checkbox = ({ checkboxProps }: ICheckedArr) => {
console.log(checkboxProps);
const [checked, setChecked] = useState(false);
return (
<div>
<form>
{checkboxProps.map((item) => {
return (
<label key={item.id}>
<input
type="checkbox"
name={item.name}
checked={checked}
onChange={(e) => setChecked(e.target.checked)}
/>
<span>{item.title}</span>
</label>
);
})}
</form>
</div>
);
};
export default Checkbox;
Я пытался сделать общий useState, но создать useState для проверки на checked внутри цикла нельзя.
upd. Добавил мою попытку, но опять таки это ссылается на один и тот же setChecked и по клику они все checked
upd2. это не дубликат, в предложенном варианте нет setState в цикле
map
в рендере). Откуда беруться такие вопросы... Или поясните если я чего не понял, через редактирование вопроса, дополнив его подробностями.