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;
This works fine:
export const Item = injectIntl(
(props) => {...}
)
Just don't forget the the brackets, i.e. const Item = injectIntl(arrow function)
Also use rest to get all existing parameters. And remove spaces from your id, otherwise querySelector will not work. In below case id is also used as a displayed label in the cell:
export const TableCellId = injectIntl((props) => {
const { id, intl, ...rest } = props
return (
<TableCell id={removeSpaces(id)} {...rest}>
{mytanslation(intl, id)}
</TableCell>
)
})