React Component API

Page Content:
1.Component API-Introduction
2.Component API-setState
3.Component API-forceUpdate
4.Component API-findDOMNode

1.Introduction:

1.React uses components that make code individual & reusable.
2.Some methods are by default associated with React Components such methods are called React Component APIs.
3.Below are some most important methods available in react component API.

  • setState().
  • ForceUpdate().
  • ReactDOM.findDOMNode().

Let us discuss one by one,


1.React setState :

  • setState() method is used to update the state of the component.
  • This method will not replace the state, but only add changes to the original state.

In the ES6 classes, this.method.bind(this) is used to manually bind the setState() method.

Usage :
setState(updater, [callback]);

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         data: "Welcome to webdev99"
		 };		
		 this.changeState=this.changeState.bind(this);
   }
    changeState(){  
          this.setState({data: "data updated"});  
          }  
   render() {
      return (
         <div>
            <h1>{this.state.data}</h1>
            <input  
                 type="button"  
                 value="update data"  
                 onClick={this.changeState}  
            />
         </div>
      );
   }
}
export default App;

After button click state changes to “data updated”,


2.Force Update:

1.By default, when your component’s state or props change, the component will re-render.
2.If you want to re-render the component for some other data,
then you can tell React that the component needs re-rendering by calling forceUpdate().
3.Calling forceUpdate() will cause render() to be called on the component.

Usage:
Component.forceUpdate(callback);

Example:
Lets understand forceUpdate() with example.

Here whenever ‘FORCE UPDATE’ button is clicked component will re-render and generates random number everytime.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateMethod = this.forceUpdateMethod.bind(this);
   };
   forceUpdateMethod() {
      this.forceUpdate();
   };
   render() {
      return (
         <div>
            <button onClick = {this.forceUpdateMethod}>FORCE UPDATE</button>
            <h4>Random number: {Math.random()}</h4>
         </div>
      );
   }
}
export default App;

Note:
Normally you should try to avoid all uses of forceUpdate() and only read
from this.props and this.state in render().


3.findDOMNode():

For DOM manipulation, we can use ReactDOM.findDOMNode() method.This method allows us to find or access the underlying DOM node.

Usage:
ReactDOM.findDOMNode(component)

Example:
For DOM manipulation, first, you need to import ‘react-dom’;

App.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor() {
      super();
      this.findMyDomNode = this.findMyDomNode.bind(this);
   };
   findMyDomNode() {
      var my_Div = document.getElementById('my_Div');
      ReactDOM.findDOMNode(my_Div).style.color = 'red';
   }
   render() {
      return (
         <div>
            <button onClick = {this.findMyDomNode}>FIND DOME NODE</button>
            <div id = "my_Div">NODE</div>
         </div>
      );
   }
}
export default App; 

Note:
findDOMNode only works on mounted components. If you try to call this on a component that has not been mounted yet an exception will be thrown.

findDOMNode cannot be used on functional components.