javascript - react-intl - accessing nested messages -

i'm trying use react-intl package inside app. app rendered on server wrote code determine language use , serve intlprovider.

translations provided in messages.js file , this:

export default {   en: {     message: '...some message',     nested: {       anothermessage: '...another message',     }   }   de: {     // ...   } } 

what this:

// import messages './messages.js' // check locale user (based on cookies or other things) const locale = ... // required messages const messagesforlocale= = messages[locale]; // supply messages intlprovider <intlprovider locale={locale} messages={messagesforlocale}>   // ... </intlprovider> 

then when use formattedmessage component can't access nested message (anothermessage) code this:

<formattedmessage id="nested.anothermessage" ... /> 

but message accessible.

any ideas made mistake, or maybe i'm missing in whole concept?

since react intl v2 no longer supports nested messages objects, messages need flatten.

export const flattenmessages = ((nestedmessages, prefix = '') => {   if (nestedmessages === null) {     return {}   }   return object.keys(nestedmessages).reduce((messages, key) => {     const value       = nestedmessages[key]     const prefixedkey = prefix ? `${prefix}.${key}` : key      if (typeof value === 'string') {       object.assign(messages, { [prefixedkey]: value })     } else {       object.assign(messages, flattenmessages(value, prefixedkey))     }      return messages   }, {}) })  // use flattenmessages <intlprovider locale={locale} messages={flattenmessages(messagesforlocale)}> 

refs:

• https://github.com/yahoo/react-intl/wiki/upgrade-guide#flatten-messages-object
• https://github.com/yahoo/react-intl/issues/162#issuecomment-139683466