how to fetch api data in ReactJS? - reactjs

Question

i was trying to fetch api data in reactjs but data are not loading perfectly as expected, instead of i am getting an empty page as result. here below is my source code;
i am probably new to reactjs, it would be great if anybody could help me where i am doing thing wrong. thank you so much in advance.
endpoint_url : http://localhost:8000/api/blog_list
api-data:
[
{
"id": 1,
"url": "http://localhost:8000/api/blog_detail/brown",
"title": "brown",
"slug": "brown",
"image": "http://localhost:8000/media/blog/image_2.jpg",
"description": "",
"created_on": "2020-05-08T15:20:53Z",
"status": true,
"category": [
1
]
},
{
"id": 2,
"url": "http://localhost:8000/api/blog_detail/black",
"title": "black",
"slug": "black",
"image": "http://localhost:8000/media/blog/loc.png",
"description": "",
"created_on": "2020-05-08T17:14:31Z",
"status": true,
"category": [
2
]
}
]
./src/Base.js
export default class App extends Component{
state = {
bloglist:[]
};
componentDidMount(){
this.fetchData()
}
fetchData = async () => {
try{
const response = await fetch("http://localhost:8000/api/blog_list");
const jsonResponse = await response.json()
this.setState({bloglist:jsonResponse})
}
catch(error){
console.log(error)
}
}
render(){
const {bloglist} = this.state
if(!bloglist){
return (
<div>
<h1>loading...</h1>
</div>
)
}
return (
{
bloglist.map(bloglist => (
<h3 class="mb-2">
{bloglist.title}
</h3>
<p class="mb-4">{bloglist.description}</p>
))
}
)
}
}

Answer 1

Wrap it in a div. React expects a single element.
<h3 class="mb-2">
{bloglist.title}
</h3>
<p class="mb-4">{bloglist.description}</p>

Answer 2

Check this code.
export default class App extends Component {
state = {
bloglist: [],
};
componentDidMount() {
this.fetchData();
}
fetchData = async () => {
try {
const response = await fetch('http://localhost:8000/api/blog_list');
const jsonResponse = await response.json();
this.setState({ bloglist: jsonResponse });
} catch (error) {
console.log(error);
}
};
render() {
const { bloglist } = this.state;
var page = (
<div>
<h1>loading...</h1>
</div>
);
if (bloglist.length > 0)
page = bloglist.map((bloglistEntry) => {
return (
<React.Fragment key={bloglistEntry.id}>
<h3 className='mb-2'>
<a href='single.html'>{bloglistEntry.title}</a>
</h3>
<p className='mb-4'>{bloglistEntry.description}</p>
</React.Fragment>
);
});
return page;
}
}