Extracting messages in a loop

[imageck]

Hello!

I have a component that renders a list of items:

      <Dropdown.Menu as="menu" role="listbox" id={ID}>
        {
          MODES.map(mode => (<Dropdown.Item as="li"
                                            role="option"
                                            active={value === mode}
                                            eventKey={mode}
                                            key={mode}>
            <Icon {...ICONS[mode]} />
            <FormattedMessage id={`header.colorScheme.${mode}`}
                              defaultMessage="{mode}"
                              values={{ mode }} />
          </Dropdown.Item>))
        }
      </Dropdown.Menu>

On extraction, all I get is a single message with no interpolation:

{   
  "M7NuVz": {
    "defaultMessage": "{mode}",
    "description": "Capitalize this."
  }   
}

I'm guessing this is due to the fact that the extractor just parses the source file and has no way of no knowing how a React component is rendered eventually.

How could this problem be solved without duplicating the code?

[imageck]

The solution was to use either a select clause or defineMessages().