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:
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js