title: Changing text on button push (React.js)
body: <p>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.</p>
  
  <pre><code>class App extends Component {
     handleClick() {
       alert("Test");
     }
  
     render() {
       return (
  
    &lt;body&gt;
      &lt;div class="App"&gt;
        &lt;div class="floating-box"&gt;
            &lt;div class="search-tickets"&gt;
              &lt;button id="demo" class="color-button"&gt;Button 1&lt;/button&gt;
              &lt;button class="color-button button2"&gt;Button 2&lt;/button&gt;
              &lt;button class="color-button button3"&gt;Button 3&lt;/button&gt;
              &lt;button ref="test" class="color-button button4" onClick={this.handleClick}&gt;Button 4&lt;/button&gt;
  
              &lt;h1 class="h1-text"&gt;Text&lt;/h1&gt;&lt;br/&gt;
              &lt;h2&gt;
              &lt;br/&gt;-123
              &lt;br/&gt;-456
              &lt;br/
              &lt;/h2&gt;
  
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>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.</p>
  
  <p>Any guidance on this would be incredibly helpful.</p>