Using named formats in <FormattedDate> in react-intl

Question

I'm trying to use named formats when using react-intl, but I can't manage to get it working. Based in my research, I think this should be a minimal example:

import React from 'react';
import ReactDOM from 'react-dom';
import { IntlProvider, FormattedDate } from 'react-intl';

const Testy = (props) => (
    <FormattedDate
        value={ props.myDate }
        format='year-only'
      />
 )

const app = (
  <IntlProvider formats={{ date: { 'year-only': { year: 'numeric' } } }}>
    <Testy myDate={ "2010/10/01" }/>
  </IntlProvider>
)

ReactDOM.render(app, document.getElementById('App'));

But then, at runtime an error says: [React Intl] No date format named: year-only

What am I doing wrong?

Answer 1

Make sure and set a 'locale' property on IntlProvider: https://github.com/yahoo/react-intl/wiki/Components#intlprovider

That error message obviously is a little shallow but knowing your locale is a fundamental aspect of localization in general :)