React (software): Difference between revisions

Content deleted Content added
C7pmc (talk | contribs)
Tag: Reverted
Jpw50030 (talk | contribs)
Your code provides no explanation to introduce the user to the different hooks you're using. You're also importing unnecessary NPM modules and hooks that you are not using which introduce even more confusion. Please revise your example to be more streamlined and not depend on other modules or unknown localhost APIs, also please use a linter and code formatter before you submit any code snippets. Undid revision 1019281974 by C7pmc (talk)
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.