Formatting Dates in React Js with fns

If you are new to reactjs, you will agree with me that date format is quite different from that of core javascript where what is needed to do is just writing a simple date object: new Date().

However in the modern day JavaScript library which is reactjs, getting and formatting date is quite different. Though there are ways to format dates, but I will show you the simplest way you can go about it.

• 1 install npm date-fns in your project directory (root directory)

C:\MyProjects\react-project>npm install date-fns

• 2 use import { format } from 'date-fns' within your component

import { format } from 'date-fns'

• 3 use the new Date() object within your component

Now, after doing 2 and 3 as mentioned above, you can then make use of the Date() and format it as you wish. For example:

{format ( new Date(), 'do MMMM Y')}

This will give us the current date. Example: 22 SEPTEMBER 2021