Столкнулся с такой проблемой: в анкете пользователя необходимо реализовать чекбоксы. Искал какое-либо простое решение, но сейчас пока сделал вот так:
import Checkbox from '../UI/Checkbox/Checkbox';
class Profile extends React.Component {
state = {
checkedItems: new Map(),
dopWork: [
{ name: '1', label:'1', key: 'box1', active: false },
{ name: '2', label:'2',key: 'box2',active: false },
{ name: '3', label:'3',key: 'box3',active: false },
{ name: '4', label:'4',key: 'box4',active: false },
{ name: '5',label:'5', key: 'box5',active: false },
{ name: '6', label:'6',key: 'box6',active: false },
{ name: '7', label:'7',key: 'box7',active: false },
]}
//обрабатываю изменения чекбоксов
handleChange = (e) => {
const item = e.target.name;
const isChecked = e.target.checked;
this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
console.log(this.state.checkedItems)
}
// отрисовываю чекбоксы
checkBoxRender = () =>{
return (
<div className={classes.checkbox}>
{
this.state.dopWork.map(item => (
<label key={item.key}>
<Checkbox name={item.name} checked={this.state.checkedItems.get(item.name)} onChange={this.handleChange} />
{item.name}
</label>
))
}
</div>
)
}
}
В таком виде чекбоксы работают, состояние изменяется. Но в объекте Map у нас идет коллекция элементов {'Название пункта', активность}. И я не могу разобраться как это привести в вид который годится для сервера? Т.е. у меня туда сейчас улетают строки и среди них есть объект Map. Это нормально или лучше перед отправкой преобразовать данные из Map? И вообще, можно ли отказаться от Map в пользу какого-либо более простого решения? Просто с Map ранее не сталкивался, и по этому не знаю нужен ли вообще он тут... Заранее большое спасибо.