Changing text on button push (React.js)

Question

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.

Austin Greco · Accepted Answer · 2017-10-13 21:09:15Z

8

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>

answered Oct 13, 2017 at 21:09

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Spencer Over a year ago

Is it possible to have an if statement within one function for multiple buttons or is it better to separate them into different functions like here?

Steven Scaffidi · Accepted Answer · 2017-10-13 21:17:26Z

0

You can defined an array with the texts you want in order to make it concise. Use this.setState to keep track of what you clicked: https://codepen.io/sscaff1/pen/mBGLjm

const texts = [
  'Text 1',
  'Text 2',
  'Text 3',
  'Text 4'
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedText: ''
    }
  }

  handleClick = (i) => {
        this.setState({ clickedText: texts[i] });
  };

  render() {
    const { clickedText } = this.state;
    return (
      <div>
        {texts.map((text, i) => 
          <button key={i} onClick={() => this.handleClick(i)}>Click me {i + 1}</button>
        )}
        {clickedText && <p>I clicked on button with text: {clickedText}</p>}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

answered Oct 13, 2017 at 21:17

Steven Scaffidi

2,3071 gold badge14 silver badges15 bronze badges

2 Comments

Spencer Over a year ago

Ok very cool. What about if the text I want to display is an array, and I want to display it as a list? To keep things simple for now, I am going to have the different arrays as pre-set constants.

Steven Scaffidi Over a year ago

Take another look at the codepen. I updated it for what I think you're looking for.

Collectives™ on Stack Overflow

Changing text on button push (React.js)

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related