React Component API

ReactJS component is a top-level API. It makes the code completely individual and reusable components in the application. It includes various methods for:

⦁ Creating elements
⦁ Transforming elements
⦁ Fragments

Here, we are going to explain the 3 most important methods available in the React component API.

⦁ setState()
⦁ forceUpdate()
⦁ findDOMNode()

setState():

This react method is known to update the state of the React UI component. This react method does not always replace the react state on the spot. Instead, it only adds changes to the original state component. It is a first priority method that is defined to update the user interface(UI) in response to event handlers and server responses.

Syntax:

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

Example:

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
class App extends React.Component { 
  constructor() { 
    super(); 
    this.state = { 
       msg: "Welcome to I2Tutorials" 
    }; 
    this.updateSetState = this.updateSetState.bind(this); 
  } 
  updateSetState() { 
    this.setState({ 
       msg:"Its a 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():

update the component manually.

Syntax:

Component.forceUpdate(callback);

Example:

import React, { Component } from 'react'; 
class App extends React.Component { 
  constructor() { 
    super(); 
    this.forceUpdateState = this.forceUpdateState.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:

click on ForceUpdate button, it will generate the random number

findDOMNode:

use ReactDOM.findDOMNode() method (access the underlying DOM node).

Syntax

ReactDOM.findDOMNode(component);

Example

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 myDiv = document.getElementById('myDivOne'); 
     ReactDOM.findDOMNode(myDivOne).style.color = 'red'; 
  } 
  findDomNodeHandler2() { 
     var myDiv = document.getElementById('myDivTwo'); 
     ReactDOM.findDOMNode(myDivTwo).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 id = "myDivOne">JTP-NODE1</h3> 
        <h3 id = "myDivTwo">JTP-NODE2</h3> 
      </div> 
    ); 
  } 
} 
export default App;

OUTPUT:

click on the button, the color of the node will be changed