Я хочу использовать компонент Buttons в разных местах, но не как непрерывный список элементов. Я не могу использовать метод array.map, потому что он создает непрерывный список компонентов. Я хочу получить список (значений) из каждый компонент кнопок. Я хочу сохранить 'id' для каждого из этих (значений), чтобы я мог их идентифицировать
class Buttons extends Component {
constructor(props) {
super(props);
this.state = {
value: 0,
};
this.increase = this.increase.bind(this);
this.decrease = this.decrease.bind(this);
}
increase(e) {
e.preventDefault();
if (this.state.value < 10) {
return this.setState(() => ({ value: this.state.value + 1 }));
} else return null;
}
decrease(e) {
e.preventDefault();
if (this.state.value !== 0) {
return this.setState(() => ({ value: this.state.value - 1 }));
} else return null;
}
render() {
return (
<div>
<button onClick={this.decrease}>-</button>
<label>{this.state.value}</label>
<button onClick={this.increase}>+</button>
</div>
);
}
}
Я хочу использовать компонент, как показано ниже
<li>
Adults <Buttons id={10} key={10} />
</li>
<li>
Students <Buttons id={20} key={20} />
</li>