В моем проекте есть множество таблиц, поля которых должны отображаться/скрываться по желанию пользователя. В json у каждого поля есть свойство isVisible и оно по умолчанию true. В проекте есть компонент, вызываемый по клику на таблицу, со списком всех полей таблицы и чекбоксами у каждого поля. По умолчанию все чекбоксы должны быть чекнуты, раз в json isVisible прописано true.
Как прописать функцию чтобы при клике по чекбоксу галочка снималась и значение у поля становилось isVisible = false? И обратно true при следующем клике
вот код компонента где handleToggle - попытка приблизиться к решению:
export const SideBarNavigation = ({
table: selectedTable,
}) => {
const [checkedColumn, setCheckedColumn] = useState(null);
const [visibilityColumn, setVisibilityColumn] = useState(null);
const handleToggle = () => {
let myColumn = [];
Object.assign(myColumn, selectedTable.columns);
for (let i = 0; i < myColumn.length; i++) {
if (myColumn[i].isVisible === true) {
setCheckedColumn(true);
setVisibilityColumn(true);
} else {
setCheckedColumn(false);
setVisibilityColumn(false);
}
}
}
return (
<>
<div className={styles.FieldsHeaderContainer}>
<label for="side-checkbox">Поля таблицы:</label>
</div>
<div
className={styles.FieldsContainer}
//style={{ borderColor: color }}
>
{selectedTable.columns?.map((column) => {
let components = [];
components.push(
<div className={styles.NameContainer}>
<Column column={column} key={column.name} />
<input
type="checkbox"
name={column.name}
value={column.name}
//checked={checkedColumn}
key={column.originalColumnId}
onChange={(value) => handleInputChange(value)}
/>
</div>
);
return components;
})}
</div>
</>
);
};