React Component API
The ReactJS component is a high-level API that makes the code modular and reusable within the application. It provides various methods for:
- Creating elements
- Transforming elements
- Fragments
In this section, we will explain the three key methods available in the React component API.
- setState()
- forceUpdate()
- findDOMNode()
setState()
This method is used to update the component's state. However, it doesn't replace the state immediately; instead, it merges the changes with the existing state. It is a key method for updating the user interface (UI) in response to event handlers and server responses.
Note: In ES6 classes, the setState() method is manually bound using this.method.bind(this).
Syntax
this.stateState(object newState[, function callback]);
In the above syntax, an optional callback function can be provided, which is executed once setState() has completed and the component has been re-rendered.
Example
App.js
import React, { Component } from 'react';
class App extends Component {
constructor() {
super();
this.state = {
msg: "Welcome to Gocourse"
};
}
// Using arrow function to automatically bind `this`
updateSetState = () => {
this.setState({
msg: "It's the best ReactJS tutorial"
});
}
render() {
return (
<div>
<h1>{this.state.msg}</h1>
<button onClick={this.updateSetState}>SET STATE</button>
</div>
);
}
}
export default App;
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App/>, document.getElementById('app'));
Output:
forceUpdate()
This method enables manual updating of the component.
Syntax
Component.forceUpdate(callback);
Example
import React, { Component } from 'react';
class App extends Component {
// Using arrow function to automatically bind `this`
forceUpdateState = () => {
this.forceUpdate();
};
render() {
return (
<div>
<h1>Example to generate random number</h1>
<h3>Random number: {Math.random()}</h3>
<button onClick={this.forceUpdateState}>ForceUpdate</button>
</div>
);
}
}
export default App;
Output
findDOMNode()
To manipulate the DOM, you can use the `ReactDOM.findDOMNode()` method. This method allows you to locate and access the underlying DOM node.
Syntax
ReactDOM.findDOMNode(component);
Example
To perform DOM manipulation, you must first import the following line in your App.js file: `import ReactDOM from 'react-dom'`.
App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
constructor() {
super();
this.divOneRef = React.createRef();
this.divTwoRef = React.createRef();
}
findDomNodeHandler1 = () => {
// Using React ref to directly access the DOM node
ReactDOM.findDOMNode(this.divOneRef.current).style.color = 'red';
};
findDomNodeHandler2 = () => {
// Using React ref to directly access the DOM node
ReactDOM.findDOMNode(this.divTwoRef.current).style.color = 'blue';
};
render() {
return (
<div>
<h1>ReactJS Find DOM Node Example</h1>
<button onClick={this.findDomNodeHandler1}>FIND_DOM_NODE1</button>
<button onClick={this.findDomNodeHandler2}>FIND_DOM_NODE2</button>
<h3 ref={this.divOneRef}>JTP-NODE1</h3>
<h3 ref={this.divTwoRef}>JTP-NODE2</h3>
</div>
);
}
}
export default App;
Output
Once you click the button, the color of the node will change, as shown in the screen below.
