How to get the current Year in React

avatar
Borislav Hadzhiev

Last updated: Apr 7, 2024
2 min

banner

# Get the current Year in React

Use the Date() constructor to get the current year in React, e.g. new Date().getFullYear().

The getFullYear() method will return a number that corresponds to the current year.

App.js
const App = () => { console.log(new Date().getFullYear()); return ( <div> <div>{new Date().getFullYear()}</div> <br /> <div> Copyright © {new Date().getFullYear()} Bobby Hadz </div> </div> ); }; export default App;

react get current year

The code for this article is available on GitHub

We used the Date() constructor to get a Date object on which we can call various methods.

App.js
const now = new Date(); console.log(now.getFullYear()); // 👉️ 2023

The Date.getFullYear method returns a four-digit number that represents the year of the date.

Notice that we had to wrap the call to the getFullYear() method in curly braces in our JSX code.

App.js
<div>{new Date().getFullYear()}</div>
The curly braces mark the beginning of an expression that has to be evaluated.

The JavaScript code between the curly braces will be evaluated with the current year.

Other commonly used methods on the Date object are:

  • Date.getMonth - returns an integer between 0 (January) and 11 (December) and represents the month for a given date. Yes, unfortunately, the getMonth method is off by 1.
  • Date.getDate - returns the day of the month for a specific date
App.js
const App = () => { const year = new Date().getFullYear(); const month = new Date().getMonth() + 1; const day = new Date().getDate(); return ( <div style={{padding: '150px'}}> <div>{new Date().getFullYear()} - year</div> <div>{new Date().getMonth() + 1} - month</div> <div>{new Date().getDate()} - day of month</div> <br /> <div> Copyright © {new Date().getFullYear()} Bobby Hadz </div> </div> ); }; export default App;

react get year month day of month

The code for this article is available on GitHub

These methods allow you to get the year/month/day for any date object, it doesn't have to be the current year.

App.js
const App = () => { const date = '2025-07-21'; const year = new Date(date).getFullYear(); const month = new Date(date).getMonth() + 1; const day = new Date(date).getDate(); return ( <div> <div>{new Date(date).getFullYear()} - year</div> <div>{new Date(date).getMonth() + 1} - month</div> <div>{new Date(date).getDate()} - day of month</div> <br /> <div> Copyright © {new Date(date).getFullYear()} Bobby Hadz </div> </div> ); }; export default App;

react get year month day of different date

The code for this article is available on GitHub
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.