ReactJs does not generate data into view after calling api - reactjs

Question

I just found out about reactjs, I do not understand why my code is not error but it can not render the data to view.
I tried the test function to display. it works normally,
But in the getAllProducts function, after calling the api, it seems impossible to update the html code on my page.
What was wrong with me?
Here is my code:
import React from 'react';
class ListObject extends React.Component {
getAllProducts() {
fetch("http://5bd054ce142d360013a172f3.mockapi.io/api/products")
.then(res => res.json())
.then((result) => {
// return (<h1>Why not display????</h1>);
result.map(
(product, i) => {
return <TableRow key={i} data={product} />
}
)
},
(error) => {
return "errrr";
}
)
}
test() {
return (<h1>Hello World</h1>);
}
render() {
return (
<div className="container-fluid">
<table className="table table-hover">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Avatar</th>
<th>Created At</th>
</tr>
</thead>
<tbody>
{this.getAllProducts()}
</tbody>
</table>
{this.test()}
</div>
);
};
}
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.avatar}</td>
<td>{this.props.data.createdAt}</td>
</tr>
);
};
}
export default ListObject

Answer 1

You seem to have got it all wrong. In React, you need to render data based on component's state and props. So, you must do something like this:
class YourComponent extends React.Component {
getAllProducts() {
// you can handle a "loading" state as well
this.setState({isLoading: true});
fetch("http://example.com/api/products")
.then(res => res.json())
.then(
(result) => {
this.setState({
products: result,
isLoading: false,
});
},
(error) => {
return this.setState({hasError: true, error})
}
);
}
}
componentDidMount() {
fetchAllProducts();
}
render() {
const {products, isLoading, hasError} = this.state;
if (hasError) {
return (
<p>Something bad happened</p>
);
}
if (isLoading) {
return (
<p>Hey, we're fetching data...</p>
);
}
return (
<table>
{products.map(p => <TableRow ... />)
</table>
)
}
}
NOTE: I've used a few concepts that you should know about, so here are some docs:
Read about componentDidMount() here
We can declare special methods on the component class to run some code when a component mounts and unmounts. The componentDidMount() method runs after the component output has been rendered to the DOM.
Read about state here

Answer 2

Change your getAllProducts and add state object to the component like mentioned below. API call is asynchronous so you cannot return it directly. what you can do is use component state. And make the api call in componentDidMount to get the api data.
class ListObject extends React.Component {
state = {
result: []
};
componentDidMount() {
this.getAllProducts();
}
getAllProducts() {
return fetch("https://5bd054ce142d360013a172f3.mockapi.io/api/products")
.then(res => res.json())
.then(result => {
// return (<h1>Why not display????</h1>);
this.setState({
result
});
})
.catch(e => {
//dispatch some action to showcase error or
//make state update using setState to show error
return null;
});
}
getProductListUI = () => {
const { result } = this.state;
return result.map((product, i) => <TableRow key={i} data={product} />);
};
test() {
return <h1>Hello World</h1>;
}
render() {
return (
<div className="container-fluid">
<table className="table table-hover">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Avatar</th>
<th>Created At</th>
</tr>
</thead>
<tbody>{this.getProductListUI()}</tbody>
</table>
{this.test()}
</div>
);
}
}
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.avatar}</td>
<td>{this.props.data.createdAt}</td>
</tr>
);
}
}
ReactDOM.render(<ListObject />, document.getElementById("root"));
Here is the codepen link working : working codepen link
Feedbacks welcome Thanks