Permalink
Browse files

Fix key prop warning (#795)

This reverts back to using `createElement` instead of JSX inside the
`render()` method of `<FormattedMessage>` to remove the missing `key`
prop warning that React is throwing in `react-intl@2.2.0`.

Fixes #787
  • Loading branch information...
1 parent 493253c commit 243529e4bb2d20b18e93d7dbc1561290f1da8f53 @ericf ericf committed on GitHub Dec 29, 2016
Showing with 17 additions and 2 deletions.
  1. +4 −2 src/components/message.js
  2. +13 −0 test/unit/components/message.js
@@ -4,7 +4,7 @@
* See the accompanying LICENSE file for terms.
*/
-import React, {Component, PropTypes, isValidElement} from 'react';
+import {Component, PropTypes, createElement, isValidElement} from 'react';
import {intlShape, messageDescriptorPropTypes} from '../types';
import {
invariantIntlContext,
@@ -129,6 +129,8 @@ export default class FormattedMessage extends Component {
return children(...nodes);
}
- return <Component>{nodes}</Component>;
+ // Needs to use `createElement()` instead of JSX, otherwise React will
+ // warn about a missing `key` prop with rich-text message formatting.
+ return createElement(Component, null, ...nodes);
}
}
@@ -50,6 +50,19 @@ describe('<FormattedMessage>', () => {
);
});
+ it('should not cause a unique "key" prop warning', () => {
+ const {intl} = intlProvider.getChildContext();
+ const descriptor = {
+ id: 'hello',
+ defaultMessage: 'Hello, {name}!',
+ };
+
+ const el = <FormattedMessage {...descriptor} values={{name: <b>Eric</b>}} />;
+
+ renderer.render(el, {intl});
+ expect(consoleError.calls.length).toBe(0);
+ });
+
it('should not re-render when props and context are the same', () => {
intlProvider = new IntlProvider({locale: 'en', defaultLocale: 'en'}, {});
renderer.render(

0 comments on commit 243529e

Please sign in to comment.