Data Fetching with React Hooks

• Create Components folder under src folder
• Add DataFetchingWithHooks.js file and add below Code

import React, { useState, useEffect } from "react";

import axios from "axios";

function DataFetchingWithHooks() {

const [data, setData] = useState({ hits: [] });

useEffect(() => {

const fetchData = async () => {

const result = await axios(

"https://hn.algolia.com/api/v1/search?query=redux"

);

setData(result.data);

};

fetchData();

}, []);

return (

<div>

<center>

<h5>Data Fetching with React Hooks</h5>

</center>

<ul>

{data.hits.map(item => (

<li key={item.objectID}>

<a href={item.url}>{item.title}</a>

</li>

))}

</ul>

Ref: https://www.robinwieruch.de/react-hooks-fetch-data

</div>

);

}

export default DataFetchingWithHooks;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import DataFetchingWithHooks from "./components/DataFetchingWithHooks";

function App() {

return (

<div className="App">

<DataFetchingWithHooks />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

Data Fetching with React Hooks On Page load and on button click

• Create Components folder under src folder
• Add DataFetchingInHooksOnBtnClick.js file and add below Code

import React, { useState, useEffect, Fragment } from "react";

import axios from "axios";

function DataFetchingInHooksOnBtnClick() {

const [data, setData] = useState({ hits: [] });

const [query, setQuery] = useState("redux");

const [url, setUrl] = useState(

"https://hn.algolia.com/api/v1/search?query=redux"

);

useEffect(() => {

const fetchData = async () => {

const result = await axios(url);

setData(result.data);

};

fetchData();

}, [url]);

return (

<Fragment>

<center>

<h5>

Data Fetching with React Hooks, On Page load and on button click{" "}

</h5>

</center>

<input

type="text"

value={query}

onChange={event => setQuery(event.target.value)}

/>

<button

type="button"

onClick={() =>

setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)

}

>

Search

</button>

<ul>

{data.hits.map(item => (

<li key={item.objectID}>

<a href={item.url}>{item.title}</a>

</li>

))}

</ul>

Ref: https://www.robinwieruch.de/react-hooks-fetch-data

</Fragment>

);

}

export default DataFetchingInHooksOnBtnClick;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import DataFetchingInHooksOnBtnClick from "./components/DataFetchingInHooksOnBtnClick";

function App() {

return (

<div className="App">

<DataFetchingInHooksOnBtnClick />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

Data Fetching with React Hooks On Page load and on button click With Loading Option

• Create Components folder under src folder
• Add DataFetchingInHooksLoading.js file and add below Code

import React, { Fragment, useState, useEffect } from "react";

import axios from "axios";

function DataFetchingInHooksLoading() {

const [data, setData] = useState({ hits: [] });

const [query, setQuery] = useState("redux");

const [url, setUrl] = useState(

"https://hn.algolia.com/api/v1/search?query=redux"

);

const [isLoading, setIsLoading] = useState(false);

useEffect(() => {

const fetchData = async () => {

setIsLoading(true);

const result = await axios(url);

setData(result.data);

setIsLoading(false);

};

fetchData();

}, [url]);

return (

<Fragment>

<center>

<h5>

Data Fetching with React Hooks, On Page load and on button click, With

Loading Option

</h5>

</center>

<input

type="text"

value={query}

onChange={event => setQuery(event.target.value)}

/>

<button

type="button"

onClick={() =>

setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)

}

>

Search

</button>

{isLoading ? (

<div>Loading ...</div>

) : (

<ul>

{data.hits.map(item => (

<li key={item.objectID}>

<a href={item.url}>{item.title}</a>

</li>

))}

</ul>

)}

<div>Ref: https://www.robinwieruch.de/react-hooks-fetch-data</div>

</Fragment>

);

}

export default DataFetchingInHooksLoading;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import DataFetchingInHooksLoading from "./components/DataFetchingInHooksLoading";

function App() {

return (

<div className="App">

<DataFetchingInHooksLoading />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

componentDidMount and componentDidUpdate in react Class Component

• Create Components folder under src folder
• Add ClassDidMountDidUpdateEXP1.js file and add below Code

import React, { Component } from "react";

class ClassDidMountDidUpdateEXP1 extends Component {

constructor(props) {

super(props);

this.state = {

role: "React developer",

name: "Adi"

};

}

componentDidMount() {

console.log(

`didMount: Hello I'm ${this.state.name} and I'm a ${this.state.role}`

);

}

componentDidUpdate() {

console.log(

`didUpdate: Hello I'm ${this.state.name} and I'm a ${this.state.role}`

);

}

render() {

return (

<div>

<center>

<h4> componentDidMount & componentDidUpdate in Class Component</h4>

</center>

<p>{`Hello I'm ${this.state.name} and I'm a ${this.state.role}`}</p>

<button

onClick={() => this.setState({ name: "JC", role: ".net developer" })}

>

Change me

</button>

</div>

);

}

}

export default ClassDidMountDidUpdateEXP1;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import ClassDidMountDidUpdateEXP1 from "./components/ClassDidMountDidUpdateEXP1";

function App() {

return (

<div className="App">

<ClassDidMountDidUpdateEXP1 />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

useEffect example in React hooks

• Create Components folder under src folder
• Add UseEffectEXP1.js file and add below Code

import React, { useState, useEffect } from "react";

function UseEffectEXP1() {

const [name, setname] = useState("");

useEffect(() => {

console.log("useEffect");

setname("adi");

document.title = "Use Effect EXP1";

}, []);

return (

<div>

<div>Use Effect EXP1</div>

<div>{name}</div>

</div>

);

}

export default UseEffectEXP1;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import UseEffectEXP1 from "./components/UseEffectEXP1";

function App() {

return (

<div className="App">

<UseEffectEXP1 />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

React hooks Multiple useState example

• Create Components folder under src folder
• Add MultipleStateHooksEXP1.js file and add below Code

import React, { useState } from "react";

function MultipleStateHooksEXP1() {

const [count, setCount] = useState(0);

const [Student, setStudents] = useState({ name: "adi", id: 100 });

const [coupon, setCoupon] = useState(null);

return (

<>

<div>React Multiple State Hook EXP1</div>

<div>{count}</div>

<div>

<button onClick={() => setCount(count + 1)}>Click</button>

</div>

<br />

<div>

Name:{Student.name}

<br />

Id:{Student.id}

<p>Student Info: {JSON.stringify(Student)}</p>

</div>

<div>

<button onClick={() => setStudents({ ...Student, name: "jc" })}>

Update Name

</button>

</div>

<div>

<button onClick={() => setStudents({ ...Student, id: 501 })}>

Update Id

</button>

</div>

<div>{coupon}</div>

<div>

<button onClick={() => setCoupon(coupon + 1)}>Click</button>

</div>

</>

);

}

export default MultipleStateHooksEXP1;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import MultipleStateHooksEXP1 from "./components/MultipleStateHooksEXP1";

function App() {

return (

<div className="App">

<MultipleStateHooksEXP1 />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

React hooks useState example 2

• Create Components folder under src folder
• Add ReactStateHookEXP2.js file and add below Code

import React, { useState } from "react";

function ReactStateHookEXP2() {

const [count, setCount] = useState(0);

const buttonClickHandler = e => {

setCount(count + 1);

};

return (

<>

<div>React State Hook EXP2</div>

<div>{count}</div>

<div>

<button onClick={buttonClickHandler}>Click</button>

</div>

</>

);

}

export default ReactStateHookEXP2;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import ReactStateHookEXP2 from "./components/ReactStateHookEXP2";

function App() {

return (

<div className="App">

<ReactStateHookEXP2 />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

React hooks useState example 1

• Create Components folder under src folder
• Add ReactStateHookEXP1.js file and add below Code

import React, { useState } from "react";

function ReactStateHookEXP1() {

const [count, setCount] = useState(0);

return (

<>

<div>React State Hook EXP1</div>

<div>{count}</div>

<div>

<button onClick={() => setCount(count + 1)}>Click</button>

</div>

</>

);

}

export default ReactStateHookEXP1;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import ReactStateHookEXP1 from "./components/ReactStateHookEXP1";

function App() {

return (

<div className="App">

<ReactStateHookEXP1 />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: