Content deleted Content added
Nonconstructive edit. Undid revision 1018689613 by 78.85.5.75 (talk) |
Tag: Reverted |
||
Line 175:
React provides a few built-in hooks like <code>useState</code>,<ref>{{Cite web|url=https://reactjs.org/docs/hooks-state.html|title=Using the State Hook – React|website=reactjs.org|language=en|access-date=2020-01-24}}</ref> <code>useContext</code>, <code>useReducer</code> and <code>useEffect</code>.<ref>{{Cite web|url=https://reactjs.org/docs/hooks-effect.html|title=Using the Effect Hook – React|website=reactjs.org|language=en|access-date=2020-01-24}}</ref> Others are documented in the Hooks API Reference.<ref>{{Cite web|url=https://reactjs.org/docs/hooks-reference.html|title=Hooks API Reference – React|website=reactjs.org|language=en|access-date=2020-01-24}}</ref> <code>useState</code> , <code>useReducer</code> and <code>useEffect</code>, which are the most used, are for controlling state and side effects respectively.
<syntaxhighlight lang="js" line="1">
import React,{Component,useCallback,useRef,useState ,useEffect } from 'react';
import axios from 'axios';// you can use fetch api
const App = () => {
const[items, setItems] = useState([]);
const [isLoaded, setIsLoaded] = useState(false);
const [error, setError] = useState(null);
useEffect(()=>{
var urli1 = `http://localhost:8080/api/videos?page=0&size=5`
axios.get(urli1).then((result)=>{
setIsLoaded(true);
setItems(result.data.items);
},(error)=>{
setIsLoaded(true);
setError(error);
})
},[])
if(error){
return(<div><p> Data is error </p></div>)
}
else if(!isLoaded){
return(<div><p> Loading </p></div>)
}else{
return(<div className="container-fluid">
<table className="table table-bodered">
<thead>
<tr>
<th>Video Title</th>
<th>Desicription</th>
<th>Userupload</th>
<th>Status</th>
<th>Thumbnail</th>
<th>Date upload</th>
</tr>
</thead>
<tbody>
{items.map(item=>(
<tr key={item._links.self.href}>
<td>{item.title}</td>
<td>{item.description}</td>
<td>{item.userupload}</td>
<td>{item.status}</td>
<td>{item.thumbnail}</td>
<td>{item.dateupload}</td>
</tr>
))}
</tbody>
</div>)
}
}
</syntaxhighlight>
==== Rules of hooks ====
There are rules of hooks<ref>{{Cite web|url=https://reactjs.org/docs/hooks-rules.html|title=Rules of Hooks – React|website=reactjs.org|language=en|access-date=2020-01-24}}</ref> which describe the characteristic code pattern that hooks rely on. It is the modern way to handle state with React.
|