Вопрос в следующем, имеется, допустим, 4 кнопки, при клике на кнопку текст в ней должен изменяться на "Открыто", сейчас же проблема в том, что если кликнуть на 1 кнопку, то текст изменится во всех кнопках, есть ли какое-нибудь элегантное решение для такой задачи? Никак не могу разобраться, спасибо.
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
state = {
open: false
};
handleOpen = () => {
this.setState({ open: !this.state.open });
};
render() {
const { open } = this.state;
return (
<div>
<button onClick={this.handleOpen}>
{open ? "Открыто" : "Закрыто"}
</button>
<button onClick={this.handleOpen}>
{open ? "Открыто" : "Закрыто"}
</button>
<button onClick={this.handleOpen}>
{open ? "Открыто" : "Закрыто"}
</button>
<button onClick={this.handleOpen}>
{open ? "Открыто" : "Закрыто"}
</button>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);