How to change div content dynamically in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. how to change div content dynamically in react js with code example.

When you click the button element, the updateContent method is provided with a value for this, which will update the div content.

Let’s look at the following example to understand how it basically works:


import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    this.state = {
        message: "aGuideHubt"
  updateContent = () => {
      this.setState({ message: "Welcome To aGuideHub!"});
  render() {
    return (
        <div className="h1 bg-danger text-white text-center p-2">
          { this.state.message }
        <div className="text-center">
          <button className="btn btn-danger" onClick={this.updateContent}>
            Click Me
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Check the output of the above code example.

React, Content, Dynamically

React, Content, Dynamically

All the best 👍