How to get the current Year in React

How to get the current Year in React

Suppose you are working on a React application and want to get the current year’s value. In this article, we will show you how to get the current year in React with the Date() constructor. Check out the information below for a better understanding.

To get the current year in React

The Date() constructor allows us to create a Date instance or return a string that is the current time value. Then you just need to access the getFullYear() method to get the value of the current year.

To illustrate, you can take a look at the following example:

import './App.css'
export default function App(){
  
  const yearOfBirth = 2000
  
  // Get the value of the current year
  const currentYear = new Date().getFullYear()
  
  return (
    <div className="container">
      <h2>{"I was born in " + yearOfBirth}</h2>
      <br />
      <hr />
      <br />
      <h2>
          This year is {currentYear}, and I will celebrate my {currentYear-yearOfBirth}nd birthday this year.
      </h2>
    </div>
  );
};

Output:

As you can see, the variable currentYear is initialized to a variable of type Date. We call the method getFullYear() on it and get a prime number that is the value of the current year.

Note that if you want to represent the obtained value in JSX code, you must enclose it in a pair of curly braces. Like in the above example, two variables: currentYear and yearOfBirth, are both wrapped in curly braces:

<h2>
          This year is {currentYear}, and I will celebrate my {currentYear-yearOfBirth}nd birthday this year.
</h2>

Some other methods are commonly used when you work with Date objects:

  • Date.getMonth() – Returns a value between 0-11 corresponding to the month from 1-12.
  • Date.getDate() – Returns the value of a day of the month of a specific date.
  • Date.getDay() – Returns a value between 0-6 corresponding to weekdays from Sunday, Monday,…, and Saturday.
import './App.css'
export default function App(){
  
  // Get the value of the day of the week, date, month, year of a specified date
  const demoDate = '2022-11-18';
  const myYear = new Date(demoDate).getFullYear();
  const myMonth = new Date(demoDate).getMonth() + 1;
  const myDate = new Date(demoDate).getDate();
  let myDay = new Date(demoDate).getDay();
 
  switch (myDay) {
    case 0:
      myDay = "Sunday";
      break;
    case 1:
      myDay = "Monday";
      break;
    case 2:
      myDay = "Tuesday";
      break;
    case 3:
      myDay = "Wednesday";
      break;
    case 4:
      myDay = "Thursday";
      break;
    case 5:
      myDay = "Friday";
      break;
    case 6:
      myDay = "Saturday";
  }
 
  return (
    <div className="container">
      <h2>Year: {myYear}</h2>
      <h2>Month: {myMonth}</h2>
      <h2>Date: {myDate}</h2>
      <h2>Day in week: {myDay}</h2>
    </div>
  );
};

Output:

Summary

In conclusion, we just showed you how to get the current Year in React. You can use the Date() constructor to work with day, month, and year objects in React. Hopefully, you have been able to apply the method that we share in this tutorial.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *