How to handle useState asynchronous in React hooks (in my case) - react-hooks

Question

Here products state is null when I try to display the product. I know to handle this we can use useEffect again for displaying the product but still product state is null. Here is the part of the code that I tried to attempt.
function Product() {
const [products, setProducts] = useState(null);
useEffect(() => {
axios
.get("http://localhost:4000/products")
.then((res) => setProducts(res.data));
}, []);
useEffect(() => {
console.log(products); // Here still products is null
products.map((product) => (
<tr key={product.id}>
<td>{product.productName}</td>
<td>{product.productDesc}</td>
<td>{product.manufacturer}</td>
<td>{product.price}</td>
<td>{product.quantity}</td>
</tr>
));
}, [products]);
return <></>;
}
If I remove products.map then it is showing as two values first one is null and the second is an array of the object (i.e my data).

Answer 1

Right now, nothing will ever be rendered as the return is empty (almost).
Try
function Product() {
const [products, setProducts] = useState(null);
useEffect(() => {
axios
.get("http://localhost:4000/products")
.then((res) => setProducts(res.data));
}, []);
if (!products) {
return null;
}
return products.map(product => (
<tr key={product.id}>
<td>{product.productName}</td>
<td>{product.productDesc}</td>
<td>{product.manufacturer}</td>
<td>{product.price}</td>
<td>{product.quantity}</td>
</tr>
));
}

Answer 2

This is a typical example of lifting the state up to the higher-order component in React.js.
All states and API calls need to be written in your top-level-component.
import ProductItem from "./ProductItem";
function Product(){
const [products, setProducts] = useState(null);
useEffect(() => {
axios
.get("http://localhost:4000/products")
.then((res) => setProducts(res.data));
}, []);
return(
<table>
<thead>
<th>Name</th>
<th>Description</th>
<th>Manufacturer</th>
<th>Price</th>
<th>Qunatity</th>
</thead>
<tbody>
<ProductItem products={products} />
</thead>
</table>
);
}
Here, the products state is passed as a prop to ProductItem. Now the ProductItem component will have the list of the product's item which can be accessed as a prop.
function ProductItem({products}) {
useEffect(() => {
console.log(products); // getting the list of the product in the developer console,
}, [products]);
return (
<>
{products.map((product) => (
<tr key={product.id}>
<td>{product.productName}</td>
<td>{product.productDesc}</td>
<td>{product.manufacturer}</td>
<td>{product.price}</td>
<td>{product.quantity}</td>
</tr>
))}
</>;
);
}
export default ProductItem;