I have multiple buttons on my screen and and inside same container I have another label, on click I want to show the label and then hide after few seconds.
I am controlling through this.state problem is when event fires it shows all labels and then hides all. I found few solutions like assign ids etc and array for buttons.
But issue is there can be unlimited buttons so thats not the way to go to set state for each button. Or if there is any other possible way.
export default class App extends React.Component { constructor(props) { super(); this.state = { visible: false } } _handleClick = () => { this.setState({ visible: !this.state.visible }); setTimeout(() => { this.setState({ visible: false }); },2000); } render() { return ( <div> <button onClick={this._handleClick}>Button 1</Text></button> {this.state.visible && <span style={styles.pic}> Pic </span> } </div> <div> <button onClick={this._handleClick}>Button 2</Text></button> {this.state.visible && <span style={styles.pic}> Pic </span> } </div> <div> <button onClick={this._handleClick}>Button 3</Text></button> {this.state.visible && <span style={styles.pic}> Pic </span> } </div> </div> ); } }