React: React Component API

React Component API

It’s all about fetch API data in react.

-To use API in code, before using API call function. First make constructor and an empty state, then call API with fetch function and after use map function to make list of data.

API’s are also available free at internet. Understand the working of API by calling API function in code-:

So in code first we create constructor and then in that we define state. Then we call API in “DidMount Component”. Then we use a map function and in map function we give fetch the elements. So, this is the simple method to call API and fetch data

		Import React from ‘react’;
		Import ‘./App.css’;
		Class App extends React.Component {
		Constructor () {
		  Super ();
		This.state = {
		Users: null
		}
		}
		componentDidMount() {
		 fetch(‘url’).then ((resp) => {
		resp.json().then((result) => {
		this.setState({users:result.data})
		})
		})
		}
		Render(){
		Return (
		< div className=”App”>
		< h1>
		  Fetch API Data
		< /h1>
		  {
		This.state.users ?
		This.state.users.map((item,i)=>
		< div>< p>
		{i}
		{item.first_name}
		{item.last_name}
		{item.email}
		< /p>
		< /div>
		)
		:
		Null
		}
		< /div>
		);
		}
	

API makes code completely individual and reusable and includes various methods.

1. Creating elements
2. Transforming elements
3. Fragments

Moreover the methods in component API are as below-:

setState()

setState() method is used to update the state of component. setState() donot do replacement but it only add changes to state. This method is used to update UI in response to event handlers and server responses.

For Example-:

		Import React, {Component} from ‘react’;
		Import propTypes from ‘prop-types’;
		Class App extends React.Component {
		 Constructor(){
		Super();
		This.state = {
		  Msg:””
		};
		This.updatesetState = this.updatesetState.bind(this);
		}
		updatesetState(){
		this.setState({
		msg:”it is best reactJS TUTORIAL”
		});
		}
		Render(){
		Return(
		< div>
		   < h1>{this.state.msg}< /h1>
		< button onClick = {this.updatesetState}>set state< /button>
		< /div>
		);}
		}
		Export default App;
	

OUTPUT-:

Another method is forceUpdate()

It makes updation manually

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

FindDOMNode()

For DOM manipulation you need to use ReactDOM.findDOMNode() method. It allows finding access underlying DOM node.

ReactDOM.findDOMNode(component);

For 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}>
		< button onClick = {this.findDomNodeHandler2}>FIND_DOM_NODE2< /button>
		< h3 id = “myDivOne”>JTP-NODE1< /h3>
		< h3 id= “myDivTwo”>JTP-NODE2< /h3>
		< /div>
		);
		}}
		Export default App;
	

Apply now for Advanced React Js Course