How to change div content dynamically in react js?
June 19, 2022Hi 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:
APP.js
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
message: "aGuideHubt"
}
}
updateContent = () => {
this.setState({ message: "Welcome To aGuideHub!"});
}
render() {
return (
<div>
<div className="h1 bg-danger text-white text-center p-2">
{ this.state.message }
</div>
<div className="text-center">
<button className="btn btn-danger" onClick={this.updateContent}>
Click Me
</button>
</div>
</div>
);
}
}
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.
All the best 👍
