'export functional component with injectIntl without using default export

Now I have two components, List and Item. Since Item is only used in List, I want to put them in a single JSX file. However, the item has to be wrapped with injectIntl to enable the functionality of the i18n string.

I found that I cannot export Item without adding default, while List is exported by default already and the only way I can do is to import Item from another file or pass the translated string from List to Item.

I wonder why can't I do with the following code and is there any better practice I can follow while using injectIntl in functional components?

// for simplicity imports are omitted
// Item and List are written in the same file (List.jsx)

const Item = ({content, intl}) => {
  return (
    <>
      <h1>{intl.formatMessage(content.i18nkey)}</h1>
      <img src={content.imgURL} />
    </>
  )
}

export injectIntl(Item); // this line is reported syntax error

const List = ({contents}) => {
  return (
    contents.map((content) => 
      <Item content={content}/>
    )
  )
}

export default List;


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source