Golang React JS Technology Blog

React JS update Div content on click

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
How to pass data from child component to its parent in ReactJS? Glyphicon Rating Star component How to show hide component on Click in React JS? State and Props in React Check which Radio button is Selected or Clicked How to set property values using expression?