title: Pass prop value from parent component to child component and map child according to parent prop value
body: <p>I have a parent component named product card, where i show the product details according to the product id. I have another child component named Rating where i retrieved the rating value for a particular product id.</p>
  
  <p>The component DisplayRating has been passed to the parent component , where the product ID is passed.</p>
  
  <pre><code>&lt;DisplayRating pID={product.product._id} /&gt;
  </code></pre>
  
  <p>Within the DisplayRating component i retrieve the list of ratings from the database and iterate over. What i want now is to pass the correct value ({ratings.avg}) to the particular product id. The product id from the database is can be retrieved by using {ratings._id}. The way i have done it now all the products get the same rating value, how can i iterate over the product id and then pass the correct rating value to product in the parent component?</p>
  
  <pre><code>  const [allRatings, setRatings] = useState([]);
  
    const loadRatings = () =&gt;{
           getRatings().then(content =&gt; {
               if(content.error){
                   console.log("error");
               }else{
                   setRatings(content);
               }
           })
      }
  
  
        return(
  
                      &lt;div &gt;
  
                          {allRatings.map((ratings, index ) =&gt; (
                              &lt;div key={index}&gt;
                                  &lt;StarRatingComponent
                                      name="rate1"
                                      starCount={5}
                                      size="10"
                                      value={ratings.avg}
                                      className="mr-5"
                                      pID
  
                                  /&gt;
                              &lt;/div&gt;
                          ))}
                      &lt;/div&gt;
  
              )
  </code></pre>
  
  <p>The data that i get from the data consists of 3 variables. _id, and the avg. _id is the product id and avg is the average star rating of a particular id. I am iterating the DisplayRating to pass the average star rating of a particular product id , but to no success</p>
  
  <p><a href="https://i.stack.imgur.com/ddnzH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ddnzH.jpg" alt="enter image description here"></a></p>
  
  <p>This is the structure of my Product card component the Display Rating component is the stars seen visually. According to the Product ID the each product card component is shown. What i am trying to achieve is according to the unique product id show the rating value in the Product component</p>