How can I output the product name, the color and its color quantity that is less than 10 as a list?

user_18128962 0
Viewed 35

[![This is the following data from the Firebase. Take note that some of the products have 1, 2 or 3 colours in each products. I want the color and the color quantity that is less than 10 to output ][1]][1]

[![his is the output of the code. This is what I want it to look like. But in the output as you can see the colour is too close to the quantity and that the product Tumbler it outputted a colour that is not less than 10.][2]][2]

This is the code that I'm having trouble with.

    <ul>
    {details.filter((detail) => Object.values(detail.colorMap).find(c => c < 10)).map((val) => 
    {
    return (<li key={val.id}><p className="pt-2">{val.prodName}{Object.entries(val.colorMap).map((c) => (<p>{c[0]}{c[1]}</p>))}</p></li>);
    })}
    </ul>
google-cloud-firestore firebase react-native react-hooks reactjs
1 Answers

You can add another filter() to get colours with value less than 10 only as shown below:

<p className="pt-2">
  {val.prodName}
  {Object.entries(val.colorMap)
    // Filter for colors with value < 10
    .filter((c) => c[1] < 10)
    .map((c) => (
      <p>
        {c[0]}
        {c[1]}
      </p>
    ))}
</p>
user_131306970
Related