The Render Method -
The render() method is the only required method in a class component.
The render() method is called when a component gets updated and re-render the HTML to the DOM including the new changes.
Explore to Understand - React Lifecycle Components
Explore to Understand - React Lifecycle Components
Note: The render() will not be invoked if shouldComponentUpdate() returns false.
As an Example,
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {color: "red"};
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
div>
h2>My Color is {this.state.color}h2>
button type="button" onClick={this.changeColor}>Change colorbutton>
div>
);
}
}
Result of this example is – My color is blue
