Menu
I'm relatively new to using react.js. I have a series of button at the top of the div, and when each one of them is pushed I would like to display a different set of text. I have been able to create a function that is activated when a button is pressed (and test it with an alert), but I can't seem to figure out how to have it present a different set of text for each different button or how to pass it based on which button is pressed.
class App extends Component {
handleClick() {
alert("Test");
}
render() {
return (
<body>
<div class="App">
<div class="floating-box">
<div class="search-tickets">
<button id="demo" class="color-button">Button 1</button>
<button class="color-button button2">Button 2</button>
<button class="color-button button3">Button 3</button>
<button ref="test" class="color-button button4" onClick={this.handleClick}>Button 4</button>
<h1 class="h1-text">Text</h1><br/>
<h2>
<br/>-123
<br/>-456
<br/
</h2>
</div>
</div>
</div>
</body>
);
}
export default App;
Ideally what I'm looking to do is have a different paragraph of text displayed below the buttons when each one of them are clicked. I've seen posts looking to change the button text or color, but not really impact a separate piece of text.
Any guidance on this would be incredibly helpful.
975
asked Oct 27 '25 18:10
Use this.setState to update a variable and then render based on that. The buttons have onClick which call the functions that update the state:
class App extends React.Component {
state = {
text: 'something'
}
onClickButton1 = () => {
this.setState({
text: 'clicked 1'
});
}
onClickButton2 = () => {
this.setState({
text: 'clicked 2'
});
}
// etc...
render() {
return (
<div>
<button onClick={this.onClickButton1}>
Button 1
</button>
<button onClick={this.onClickButton2}>
Button 2
</button>
<h1>{this.state.text}</h1>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
