Formatted message using Complex Message syntax plurar

Question

I try to use FormattedMesage(React intl) to using formatting API. how to create one formatted message, with the plural? Now:

const outputTimeOutValues = [
        {value:'00:00:01', translationId:'passage.outputTimeOut.oneSecond'},
        {value: '00:00:03', translationId:'passage.outputTimeOut.threeSeconds'},
        {value: '00:00:05', translationId: 'passage.outputTimeOut.fiveSeconds'},
        {value: '00:00:10', translationId: 'passage.outputTimeOut.tenSeconds'},
        {value: '00:00:15', translationId: 'passage.outputTimeOut.fifteenSeconds'},
        {value: '00:00:30', translationId: 'passage.outputTimeOut.thirtySeconds'}]

    const renderMenuItems = values => values.map(({value ,translationId}) =>
        <MenuItem value={value} primaryText={<FormattedMessage id={translationId} />}/>)

Expected something with Message syntax

const renderMenuItems1 = values => values.map(({minutes, seconds}) =>
    <MenuItem value={`00:${minutes}:${seconds}`} primaryText={<FormattedMessage

        defaultMessage={'Hello {seconds}, you have {minutes, second} one {minute} other {minutes}'}
        values={{seconds, minutes}}
    />}
    />)

Expected text: 1second, 2second and so on.

Answer 1

Use injectIntl to inject the intl class into your component as a prop. You can then call intl.formatMessage() on the message before inserting it as the primaryText prop to your MenuItem component.