I need help with a minor issue I'm facing.
In my app, I am creating data tables and retrieving data from two different API endpoints. The first endpoint returns data like this (e.g. offers):
{
id: 1,
product_id: 1,
name: 'some name',
etc...
}...
And the second one (e.g. products) returns data like this:
{
id: 1,
name: 'some name',
etc...
}...
What I want to achieve is to retrieve the first array but replace the product_id with the actual product name.
Here is what I have done so far:
const [offers, setOffers] = React.useState(null);
const [products, setProducts] = React.useState(null);
React.useEffect(() => {
fetch(`http://localhost:3000/api/offers`)
.then((res) => res.json())
.then((data) => {
setOffers(data.data);
});
fetch(`http://localhost:3000/api/products`)
.then((res) => res.json())
.then((data) => {
setProducts(data.data);
});
}, []);
However, I am now stuck at this point and unsure about how to proceed.