CODEWITHSUNDEEP
reactjsjsx
FabricioG
FabricioG

Reputation: 3320

Attempting to return multiple maps in jsx (react)

I currently am looping through an array and then trying to loop through an object

  return optionsGroup.map(optionItem => {
    return (
      <span className="select-wrapper-size {{selectExtraclassNameDetail}}" data-ng-show="variation_exist">
          <select className="form-control size-select" name="size" required>
              <option value="" selected>Select {optionItem}</option>

              { Object.keys(shopProduct['options'].map(optEl => {
                return (<option data-ng-repeat="var in variations" value="{{var}}">{optEl[optionItem]}</option>)
              }))
              }

          </select>
      </span>
    )

The above as is displays on html side but is missing this area:

      { Object.keys(shopProduct['options'].map(optEl => {
        return (<option data-ng-repeat="var in variations" value="{{var}}">{optEl[optionItem]}</option>)
      }))
      }

This isn't being returned so then I attempt this:

      { return Object.keys(shopProduct['options'].map(optEl => {
        return (<option data-ng-repeat="var in variations" value="{{var}}">{optEl[optionItem]}</option>)
      }))
      }

This gives me a syntax error. My question is how can I return that nested Object.keys map?

Upvotes: 0

Views: 87

Answers (1)

Hyetigran
Hyetigran

Reputation: 1215

Looks like you're missing a parens before the .map method


 { Object.keys(shopProduct['options']).map(optEl => {
        return (<option data-ng-repeat="var in variations" value="{{var}}">{optEl[optionItem]}</option>)
      }))
      }

Upvotes: 1

Related Questions