import React from 'react';
const initialLanguagesData = [
{ id: "1", name: "Javascript" },
{ id: "2", name: "Python" },
{ id: "3", name: "Java" },
{ id: "4", name: "Kotlin" },
{ id: "5", name: "Dart" },
{ id: "6", name: "C#" }
];
const TableRow = React.memo(({value}) => {
return <div className='row'>
<div className='cell'>{value}</div>
</div>
})
const Table = () => {
// хранилище для пунктов
const [checkedLanguages, setCheckedLanguages] = React.useState(initialLanguagesData);
const handleCheckboxChange = (event, languageId) =>
event.target.checked?
setCheckedLanguages(() => [...checkedLanguages, languageName])
:
setCheckedLanguages(prev => prev.filter(id => id !== languageId));
return <div className='table'>
<div className='select-cell'>
{checkedLanguages.map(languageId => (
<div key={languageId}>
<input
type='checkbox'
onChange={e => handleCheckboxChange(e, languageId)}
/>
<p>{languageId}</p>
</div>
))}
</div>
{
languagesData
.filter(language => checkedLanguages.some(id => id === language.id))
.map(language => <TableRow key={language.id} value={language.value} />)
}
</div>
}
export default Table