I have two API Data I am using. I am trying to map the data as list item. I am also trying to map the correct logo for the correct item using productCode as a matching point. How can I achieve this? I have attached my code below. Each item must have the logo, the amount, and productCode. Please if there is also a better way to merge the two API, I would be happy to learn....
export default function App() {
const [Alldata, setAlldata] = useState([]);
useEffect(() => {
// GET request using fetch inside useEffect React hook
fetch("http://localhost:1337/api/rows/")
.then((response) => response.json())
.then((json) => setAlldata(json));
// empty dependency array means this effect will only run once (like componentDidMount in classes)
}, []);
const token = "TOKEN HERE";
const [result, setResult] = useState([]);
useEffect(() => {
fetch(
"https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/product/",
{
method: "GET",
headers: { Authorization: `Bearer ${token}` },
}
)
.then((res) => res.json())
.then((json) => setResult(json));
}, []);
const mainDATA = {result, Alldata};
console.log(mainDATA);
return (
<div>App</div>
)
}