'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 |
|---|
