import React, { Component } from "react";
const choise = [
{ name: "Все", value: -1 },
{ name: "Яблоко", value: 0, checked: true },
{ name: "Груша", value: 1, checked: true },
{ name: "Арбуз", value: 2, checked: true },
{ name: "Абрикос", value: 3, checked: true }
];
class Filters extends Component {
state = {
checked: false
};
onHandleChange = e => {
console.log(e.target.value);
this.setState(({checked}) => {checked: !checked})
};
render() {
return (
<div className='filters'>
<div className='stops-quantity'>
<p className='currency__name'>Выбрать</p>
{choise.map((item, i) => {
return (
<div className='check' key={i}>
<input
className='stops__checked'
type='checkbox'
id='check1'
value={item.value}
checked={this.state.checked}
onChange={this.onHandleChange}
/>
<label className='stops__label' htmlFor='check1'>
{item.name}
</label>
</div>
);
})}
</div>
</div>
);
}
}
export default Filters;
import React, { Component } from "react";
class Filters extends Component {
state = {
form: [
{ label: "Все", name: "all", value: -1 },
{ label: "Яблоко", name: "apple", value: 0, checked: true },
{ label: "Груша", name: "pear", value: 1, checked: true },
{ label: "Арбуз", name: "watermelon", value: 2, checked: true },
{ label: "Абрикос", name: "apricot", value: 3, checked: true }
]
};
onHandleChange = e => {
const { checked, name } = e.target;
const { form } = this.state;
const index = form.findIndex(item => item.name === name);
const item = form[index];
const newForm = [...form];
newForm[index] = { ...item, checked };
this.setState({ form: newForm });
};
render() {
return (
<div className="filters">
<div className="stops-quantity">
<p className="currency__name">Выбрать</p>
{this.state.form.map(item => (
<div className="check" key={item.name}>
<input
className="stops__checked"
type="checkbox"
name={item.name}
value={item.value}
checked={item.checked}
onChange={this.onHandleChange}
/>
<label className="stops__label" htmlFor="check1">
{item.label}
</label>
</div>
))}
</div>
</div>
);
}
}
export default Filters;