React Component API

React Component API

It is a top-level API. It provides reusability to the code in the application and makes it completely individual. It has several methods for:

  • Creating Elements.
  • Transforming Elements.
  • Fragments.

Now, we are explaining the three important methods that are available in the React component API:

  • findDOMNode()
  • setState()
  • forceUpdate()

findDOMNode()

For manipulating the DOM, you have to use ReactDOM.findDOMNode() method. This method helps us to find or access the underlying DOM node.

Syntax:

ReactDOM.findDOMNode(component);

Example:

App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom'; 
class App extends React.Component {
constructor() {
super()
this.findDomNodeHandler1 = this.findDomNodeHandler1.bind(this);
this.findDomNodeHandler2 = this.findDomNodeHandler2.bind(this);
};
findDomNodeHandler1() {
var div1 = document.getElementById('One');
 ReactDOM.findDOMNode(div1).style.color = 'red';
}
findDomNodeHandler2() {
var div2 = document.getElementById('Two');
ReactDOM.findDOMNode(div2).style.color = 'blue';
}
render() {
:return (

ReactJS Find DOM Node Example

Red Color

Blue Color

) } } export default App;

Output:

Reactjs find Dom node Example

When you click on the button, the color of the text gets changed. The output after clicking on the button is as follows:

React js Find dom node

setState()

This method is used for updating the state of the component. Instead of replacing the state immediately, it only adds changes to the original state. It is a primary method that is used for updating the user interface (UI) as a response to the event handlers and the responses of the server.

Syntax:

this.stateState(object newState[, function callback]);

Example:

App.js

import React, { Component } from 'react';
import PropTypes from 'prop-types'; 
class App extends React.Component { 
constructor() {
super();
this.state = {
data: "!!!! Hello World !!!!"
}
this.updateSetState = this.updateSetState.bind(this);
}
updateSetState() {
this.setState({
data:"Welcome to tutorialandexample.com"
});
}
render() {
return (

{this.state.data}

) } } export default App

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js'; 
ReactDOM.render(, document.getElementById('app')); 

Output:

Hello world!

After clicking on the SET STATE button, you will get the following output:

welcome to tutorialandexample

forceUpdate()

This method allows the manually updating of the components.

Syntax:

Component.forceUpdate(callback);

Example:

App.js

import React, { Component } from 'react';
class App extends React.Component {
constructor() {
super()
this.forceUpdateState = this.forceUpdateState.bind(this);
}
forceUpdateState() {
this.forceUpdate();
};
render() {
return (

Example of Force Update method

Example to Generate Random Number

Random number: {Math.random()}

); } } export default App;

Output:

Example of force update method

When you click on the ForceUpdate button, you will always get the new random number. It is shown in the following image:

to generate random number



ADVERTISEMENT
ADVERTISEMENT