I am working with two different endpoints and I need to fetch data from both simultaneously in order to display it in one single element. For example, I want to show data from one table along with the corresponding name from another table if the product id matches. Currently, my code for fetching data from one endpoint looks like this:
import React, {useState, useEffect} from 'react'
import products from '../apis/apiURLS'
import './Products.css';
const Products = () => {
const [productInfo,setProductInfo] = useState([]);
const fetchProducts = async () =>{
const response = await products.get('/products/')
setProductInfo(response.data)
}
useEffect(()=>{
fetchProducts()
},[])
return (
<div>
<h1 className = "header">Products</h1>
{productInfo.map(products=> {
return (
<div className="productInfo">
{console.log(products)}
<p>Date: {products.date}</p>
</div>
)
})}
</div>
)}
export default Products
EDIT
The Products endpoint contains fields date and product_id, while the Stock endpoint has fields product_id and name, where product_id is the foreign key to Stock.
I have attempted to add another async function for the second endpoint:
const [stockInfo, setStockInfo] = useState([]);
const fetchStock = async () =>{
const response = await stock.get('/stock/')
setStockInfo(response.data)
}
useEffect(()=>{
fetchStock()
},[])
However, I am having trouble properly mapping the data to display in a single element. My desired output is:
<p>Product: {stock.name}, {products.date}</p>