How do I display text on button click in React.js

Question

Have this code (below) and am trying to display the text at the click of a button in React.js.

Heres the code:

class App extends Component{

render(){ 
  alert=()=>{return(<h1>Hi</h1>)}
  return(<div className="App">
    <button onClick={this.alert}>Enter</button>
  </div>);

}}

export default App;

Any ideas why it's not working...?

this refers to the class App. But the alert function you declared is inside the render method and so it is not a child of App class. So this won't work here. Remove this and try again — Shuvo
– Shuvo, Commented Oct 6, 2019 at 13:25
You are returning the rendered function component to onClick. — Rohith Balaji
– Rohith Balaji, Commented Oct 6, 2019 at 13:28

Elder · Accepted Answer · 2019-10-06 13:30:15Z

7

If you want to display it in an alert window, you need to call a function to trigger the window.

class App extends Component{

  onButtonClickHandler = () => {
    window.alert('Hi')
  };

  render(){ 
    return(<div className="App">
      <button onClick={this.onButtonClickHandler}>Enter</button>
    </div>);

  }
}

However, if you need to show the message in your render, you can use a state to manage that.

class App extends Component{
  state = {
    showMessage: false
  }
  onButtonClickHandler = () => {
   this.setState({showMessage: true});
  };

  render(){ 
    return(<div className="App">
     {this.state.showMessage && <p>Hi</p>}
      <button onClick={this.onButtonClickHandler}>Enter</button>
    </div>);

  }
}

Source code:

If you need to toggle the text on button click, you just need to update the onButtonClickHandler function to this.setState({ showMessage: !this.state.showMessage });.

edited Oct 6, 2019 at 13:30

answered Oct 6, 2019 at 13:27

Elder

1,51412 silver badges20 bronze badges

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

1 Comment

user1924813 Over a year ago

Need the text not in a popup

Srigar · Accepted Answer · 2019-10-06 13:32:52Z

1

It won't display as like that. Here you are calling alert function and returning some JSX. How react will know where to render?. Do it like below.

class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
    render: false
}
this.alertHi = this.alertHi.bind(this);
}

alertHi() {
 this.setState({render: !this.state.render});
}

render() {
  return(
  <div className="App">
    <button onClick={this.alertHi}>Enter</button>
    {this.state.render && <h1>Hi</h1>}
  </div>
  );
 }
}

Demo

answered Oct 6, 2019 at 13:32

Srigar

1,6983 gold badges14 silver badges29 bronze badges

Collectives™ on Stack Overflow

How do I display text on button click in React.js

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related