How to format date using React Intl?

The injectIntl() higher-order component will give you access to the formatDate() method via the props in your component. The method is used internally by instances of FormattedDate and it returns the string representation of the formatted date.

import { injectIntl, intlShape } from 'react-intl';
const stringDate = this.props.intl.formatDate(date, {
year: 'numeric',
month: 'numeric',
day: 'numeric',
});
const MyComponent = ({ intl }) => <div>{`The formatted date is ${stringDate}`}</div>;
MyComponent.propTypes = {
intl: intlShape.isRequired,
};
export default injectIntl(MyComponent);

What is Shallow Renderer in React testing?

Shallow rendering is useful for writing unit test cases in React. It lets you render a component one level deep and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered.

For example, if you have the following component:

function MyComponent() {
return (
<div>
<span className={'heading'}>{'Title'}</span>
<span className={'description'}>{'Description'}</span>
</div>
);
}

Then you can assert as follows:

import ShallowRenderer from 'react-test-renderer/shallow';
// in your test
const renderer = new ShallowRenderer();
renderer.render(<MyComponent />);
const result = renderer.getRenderOutput();
expect(result.type).toBe('div');
expect(result.props.children).toEqual([
<span className={'heading'}>{'Title'}</span>,
<span className={'description'}>{'Description'}</span>,
]);

Author of content
Edit this page

Made by Michael Sakhniuk

Twitter