I’m running into a problem that I’ve been working on for days and unfortunately I can’t figure it out by myself. I’m trying to create a View which shows some information from an API. But every time I map this item, I want to do another API call which checks the live price of that product.

So I have for example some JSON data what I get from an API.

{
    "id": 1,
    "name": "test product",
    "productid": "73827duf"    
},
{
    "id": 2,
    "name": "test product2",
    "productid": "734437dde"    
}

So I show this data with the following code inside my application:

{item.products.map((products) => {
     return (
        <View
           key={products.id}
        >
             <Text
                 style={{
                    fontSize: FONTS.body3,
                    paddingLeft: 10,
                 }}
             >
                   {products.name}
                   {getProductPriceJumbo(
                       products.productid
                   )}
             </Text>
       </View>
     );
})}

So I want to run every time a function which fetches data from another API. I’m sending the productID because that’s the only information I need to call this API. You can see this function down below:

function getProductPriceJumbo(id) {
   fetch("https://---/test.php?id=" + id + "/", {
      method: "GET",
   })
      .then((response) => response.json())
      .then((data) => {
          return data[0].price;
      });
    }

So this fetch returns a big list with information about the product from a third party API. I only want to return the price, that’s the reason why I only return the price value and I want to print this out on the view above. I can’t really figure out how to do this. I get undefined from the function every time I run it. Hope someone can help me with this.

>Solution :

Create a new Price Component to display the price

function Price({ id }) {
  const [price, setPrice] = useState(0);

  useEffect(() => {
    function getProductPriceJumbo(id) {
      fetch("https://---/test.php?id=" + id + "/", {
        method: "GET"
      })
        .then((response) => response.json())
        .then((data) => {
          setPrice(data[0].price);
        });
    }

    getProductPriceJumbo(id);
  },[]);

  return <Text>{price}</Text>;
}

And your .map will become

{
  item.products.map((products) => {
    return (
      <View key={products.id}>
        <Text
          style={{
            fontSize: FONTS.body3,
            paddingLeft: 10
          }}
        >
          {products.name}
          <Price id={products.productid} />
        </Text>
      </View>
    );
  });
}