db.json
{
"Blogs":
[
{
"title": "My first Blog",
"body" : "Lorem a qui officia deserunt mollit anim id est laborum.",
"auther": "mario",
"id":1
},
{
"title": "My New Website blog",
"body" : "Lorema qui officia deserunt mollit anim id est laborum. ",
"auther": "john",
"id":2
},
{
"title": "My New Website blog",
"body" : "Lorema qui officia deserunt mollit anim id est laborum. ",
"auther": "john",
"id":3
}
]
}
from this database I want to show only author John blogs on John blogs page . I want to use his name in url or when I clicks on john blog then only John blogs should be seen.
Through ID it is accessible but only one blog.
const {id} = useParams();
const {data:blogs,isPending,error} = useFetch('http://localhost:8000/blogs/' +id );
useFetch is a hook.
This works good but when blog/ +auther it didn't work
const {auther} = useParams();
const {data:blogs,isPending,error} = useFetch('http://localhost:8000/blogs/' +auther );
database respond error:
> XHRGEThttp://localhost:8000/blogs/john [HTTP/1.1 404 Not Found 48ms]
.
console.log(res) show error this
XHRGEThttp://localhost:8000/blogs/john
[HTTP/1.1 404 Not Found 48ms]
'
import{ useState , useEffect } from 'react';
import axios from 'axios';
const useFetch = (url) => {
console.log(url);
const [data,setData] = useState(null);
const [isPending, setIsPending] = useState(true);
const [error, setError] = useState(null);
useEffect( ()=>
{
setTimeout (()=>{
axios.get(url)
.then(res => {
console.log(res);
const persons = res.data;
setData(persons);
setIsPending(false);
setError(null);
})
.catch((err)=>{
setIsPending(false);
setError(err.message);
})
},1000);
},[url]);
return { data, isPending, error }
}
export default useFetch;
Is is possible to fetch data from database by name or title? Please explain briefly, I'm new at react. Thanks.