The name of the method is followed by the equal sign, open and close parentheses, the fat arrow symbol, and then the message body. When you click the button element, the updateContent method is provided with a value for this, which will update the div content.
Create React App
Type the following command to create a new react app:
npx create-react-app demo
Now, go to the project folder:
cd demo
Now, update default App.js with below code snippet
src\App.js
import React, { Component } from 'react'; class App extends Component { constructor(props) { super(props); this.state = { message: "Default Content" } } updateContent = () => { this.setState({ message: "Updated Content!"}); } render() { return ( <div> <div className="h1 bg-secondary text-white text-center p-2"> { this.state.message } </div> <div className="text-center"> <button className="btn btn-secondary" onClick={this.updateContent}> Click Me </button> </div> </div> ); } } export default App;
Most Helpful This Week
React JS Blog CRUD operation
Getting Started with React and Hello World Example
How to use arrow function in React stateless components?
onClick Event binding and get event name in ReactJs
Working with Forms, Inputs and onChange Events in ReactJs
Create React App
State and Props in React
3 Different Examples - How State Works in React?
How to render one component in another component in React JS?
How to create simple React Router to navigate multiple pages?