map() return doesn't render in react component

Question

I'm trying to render data in a second render with JSON data mapping over it. I have to look over two objects to find matching product_ids

What am I doing wrong here?

  { 
    this.props.productGroups.map((productGroup) => {
      return (
        <TabContainer key={productGroup.id}>
          <h3>{productGroup.title}</h3>

          {
            productGroup.product_ids.map((productId) => {
              this.props.products.map((product) => {
                if (product.id == productId) {
                  return (
                    <div>
                      test
                    </div>
                  )
                } else {
                  console.log('miss')
                }
              })
            })
          }

        </TabContainer>
      )
    }) 
  }

On a sidenote, I know this is callback hell, just not to sure on the best way of refactoring this.

try this productGroup.product_ids.map(function(productId) and do the same for the next one and do return. — I_Al-thamary
– I_Al-thamary, Commented Dec 29, 2018 at 15:32
Re the side note, perhaps think about restructuring your product data so it's not an array of product objects, but an object that has product ids for keys. It would mean you wouldn't need to loop over the array - just check to see if the products object contains a specific key or not. — Andy
– Andy, Commented Dec 29, 2018 at 15:38
You can still restructure it after you've received the data. Depends if makes your life easier or not I suppose. — Andy
– Andy, Commented Dec 29, 2018 at 15:52

Ben Steward · Accepted Answer · 2018-12-29 15:33:58Z

1

Your first .map() is missing a return before this.props....

return this.props.products.map((product) => {

edited Dec 29, 2018 at 15:33

answered Dec 29, 2018 at 15:31

Ben Steward

2,4171 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kinx Over a year ago

Ahah, thank you. Would love an answer to the sidenote too.

Ben Steward Over a year ago

What does your data structure look like? How did you get the productGroup?

Ben Steward Over a year ago

Also, don’t worry about the callbacks, that’s how the language works. I’d be more concerned with what seems to be an O(n^2) operation to show one list of data.

Ahmad Maleki · Accepted Answer · 2018-12-29 16:11:49Z

@BenSteward's answer is correct. For your side note, there are various ways to lessen the nested maps.

One way would be, instead of looping through product_ids and loop through products inside of it, you can just loop through products and check if that product's id exits in the specified product_ids:

(This is a cleaner version of your code with less parenthesis and braces)

{
  this.props.productGroups.map(productGroup => (
    <TabContainer key={productGroup.id}>
      <h3>{productGroup.title}</h3>

      {this.props.products.map(product => {
        if (productGroup.product_ids.includes(product.id)) { /* Note this line */
          return <div>test</div>
        }
        console.log('miss')
      })}
    </TabContainer>
  ))
}

I'm sure it's much better in performance and also much more understandable to your future self.

Collectives™ on Stack Overflow

map() return doesn't render in react component

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related