How to properly destruct object within map function using javascript?

Question

I would like to know how can i destruct object within .map function using javascript, i have react js component and within return method i have the code below:

return (
    <>
      {setItems.map(setItem => (
      
      const { childContentfulPartFeatureSetLearnMoreOptionalTextTextNode: learnNode} = setItem
    ....
    </>

and i have the next error: Parsing error: Unexpected token... = setItem , i thought what it is

EsLint error and used // eslint-disable-next-line to disable it, but it didn't work.

UPD full return code:

return (
<div className={generalServiceItemClassName} key={guuid()}>
  {setItems.map(setItem => (
   const { childContentfulPartFeatureSetLearnMoreOptionalTextTextNode: learnNode} = setItem

    <div
      key={guuid()}
      className={cx(columnSizeClass, "service-items__item")}
      data-test="service-items"
    >
      {setItem.learnMore ? (
        <LearnMore
          className="service-items__item-learn-more-container"
          learnMoreLink={setItem.learnMore}
          text={}
          textClassName="service-items__item-texts-learn-more"
          learnMoreText={learnNode ? learnNode.setItem : null}
        >
          {renderItem(setItem)}
        </LearnMore>
      ) : (
        renderItem(setItem)
      )}
    </div>
  ))}
</div>

)

Answer 1

You can't have a const declaration within an expression, and when you use the concise form of an arrow function ( => without a { after it), the body is an expression.

You can destructure in the parameter list, though. For instance:

{setItems.map(({childContentfulPartFeatureSetLearnMoreOptionalTextTextNode: learnNode}) => (
    // ...use `learnNode` here...

In context:

return (
    <div className={generalServiceItemClassName} key={guuid()}>
        {setItems.map(({childContentfulPartFeatureSetLearnMoreOptionalTextTextNode: learnNode}) => (
            <div
              key={guuid()}
              className={cx(columnSizeClass, "service-items__item")}
              data-test="service-items"
            >
                {setItem.learnMore ? (
                    <LearnMore
                        className="service-items__item-learn-more-container"
                        learnMoreLink={setItem.learnMore}
                        text={}
                        textClassName="service-items__item-texts-learn-more"
                        learnMoreText={learnNode ? learnNode.setItem : null}
                    >
                        {renderItem(setItem)}
                    </LearnMore>
                    ) : (
                        renderItem(setItem)
                    )
                }
            </div>
        ))}
    </div>
);

Answer 2

Try something like this. (destructure and renaming)

const setItems = [{ abc: 5 }];
return (
  <>
    {setItems.map((setItem) => {
      const { abc: xyz } = setItem;
      return <div>{xyz}</div>;
    })}
  </>
);

// Alternate way, simplified.

return (
  <>
    {setItems.map(({ abc: xyz }) => (
      <div>{xyz}</div>
    ))}
  </>
);