I'm trying to display a current year in footer and trying to figure out how to get the current year React way? Is there a way to use new Date().getFullYear()?
9 Answers
You need to put the Pure JavaScript inside {}
. This works for me:
class HelloMessage extends React.Component {
render() {
return <div>{(new Date().getFullYear())}</div>;
}
}
ReactDOM.render(<HelloMessage />, mountNode);
The compiled version is:
class HelloMessage extends React.Component {
render() {
return React.createElement(
"div",
null,
new Date().getFullYear()
);
}
}
ReactDOM.render(React.createElement(HelloMessage, null), mountNode);
One thing you could do is create a function outside of the render function that gets the year:
getYear() {
return new Date().getFullYear();
}
and then insert it into the render function wherever you would like. For instance, you could put it in a <span>
tag to get the current year in your footer:
<span>
© {this.getYear()} Your Name
</span>
Which would produce:
© 2018 Your Name
With a well-named function outside of the render method, you can quickly find what the function does and you have the ability to modify it in the future if, say, you want to change the copyright year such as © 1996 - 2018
, etc.
You could just add a variable const today = new Date();
then where you want it placed add <p> {today.getFullYear()} </p>
to pull in the current year.
exemple using hooks
u cant use react useState to change value of variable date to print in DOM and useEffect to show when DOM REAdy
after caled {date} in jsx to print em docuemt loaded
import React, {useState, useEffect} from 'react';
export default function Footer() {
const [date , setDate] = useState();
const getYear = () => setDate(new Date().getFullYear())
useEffect(() => {
getYear();
}, [])
return (
<>
© Rogerio Orioli - {date}
</>
);
}
-
Feel free to reference this guide. It is often more helpful if you include at least a brief explanation along with your minimal reproducible example– JerodGFeb 16, 2020 at 4:19
You Can Copy and Paste this code in your footer components:
import React from 'react';
const Footer = () => {
const today = new Date();
const year = today.getFullYear();
return (
<footer>
<p>
<small>Copywrite © {year} Name</small>
</p>
</footer>
);
};
export default Footer;
I know this is kinda old but it has some views.
Here's minimal code to display your starting year, and the current year if it's different, which may be very handy.
function DisplayCopyright() {
const startYear = 2021
const currentYear = new Date().getFullYear()
return (
<> copyright {startYear === currentYear ? date : startYear + "-" + currentYear} </>
)
}
export default DisplayCopyright
I use one answer and modify it to make it work on react js:
import React, { Component } from "react";
export const Footer = () => {
let getYear = () => {
let currentYear = new Date().getFullYear();
return currentYear;
};
return (
<div>
<footer className="py-5 bg-dark">
<div className="container-fluid">
<p className="m-0 text-center text-white">
Copyright ©
<span> {getYear()} YourName </span>
<br /> Made with ❤️ by YourName 🔥
</p>
</div>
</footer>
</div>
);
};
If you want to calculate the current year when the component is mounted, the useState
is enough:
import React, {useState} from 'react';
export default function Footer() {
const [currentYear] = useState(() => new Date().getFullYear());
return (
<>
© MyWebsite - {currentYear}
</>
);
}
-
If you don't need the setter (
setCurrentYear
), then you should be usinguseMemo
, notuseState
. Aug 5, 2022 at 4:30 -
that's not correct, don't use useMemo Hook if you do not have expensive calculations that are affected by state changes, more details here reactjs.org/docs/hooks-reference.html#usememo In the case of useState Hook, you can pass a function which will be executed only on the initial render, more details here: reactjs.org/docs/hooks-reference.html#lazy-initial-state Aug 5, 2022 at 4:46
-
1
function Footer(params) {
const today = new Date()
const year = today.getFullYear();
return(
<>
<footer className="footer">
<div className="d-sm-flex justify-content-center justify-content-sm-between">
<span className="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com {year}</span>
<span className="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/" target="_blank">Bootstrap dashboard template</a> from Bootstrapdash.com</span>
</div>
</footer>
</>
)
}
export default Footer;
-
1Welcome to SO! Please don't post code-only answers but add a little textual explanation about how and why your approach works and what makes it different from the other answers given. You can find out more at our "How to write a good answer" page.– ahuemmerDec 17, 2022 at 13:27