CODEWITHSUNDEEP
reactjs
Jon Nicholson
Jon Nicholson

Reputation: 1161

How to get JavaScript date.getFullYear() into React

I'm building a React based app at the moment, and I'm trying to incorporate the straightforward copyright year so it's not hard-coded in. I feel like I'm missing something really straightforward, but it's stating that the name of my function within the class isn't defined - when it clearly is.

I'm assuming the date function is correct too - so if there's something wrong with that, please let me know.

Here's my code:

import React from 'react';

class Footer extends React.Component {

  year() {
    document.getElementById('copyright-year').innerHTML = ("Jon Nicholson " + new Date().getFullYear())
  }

  render() {

    return (

      <div className="footer-section">
        <div className="footer-container">
          <div className="footer-site-links">
            <a href="about">about</a>
            <a href="newsletter">newsletter</a>
            <a href="product">product page</a>
          </div>

          <div className="footer-copyright">
            <i class="far fa-copyright"></i>
            <p id="copyright-year">{year}</p>
          </div>
        </div>
      </div>

    )
  }
}

export default Footer;

And the error message:

./src/Components/Footer.js Line 23:37: 'year' is not defined no-undef

Search for the keywords to learn more about each error.

Hopefully it's really obvious, but I've been scratching my head and can't work out what I'm doing wrong?

Thanks!

Upvotes: 0

Views: 1095

Answers (4)

jerryurenaa
jerryurenaa

Reputation: 4712

this is how I do it in react js

 <div className="copyright">
  <span>Copyright © yourwebsite {new Date().getFullYear()}</span>
 </div>

Upvotes: 0

Marcus Fredriksson
Marcus Fredriksson

Reputation: 11

You could try this approach, keeping is simple, and avoiding using state or DOM-manipulation.

import React, { Component } from 'react';

class Footer extends Component {
  render() {
    
    let year = "Jon Nicholson " + new Date().getFullYear();
    
    return (

      <div className="footer-section">
        <div className="footer-container">
          <div className="footer-site-links">
            <a href="about">about</a>
            <a href="newsletter">newsletter</a>
            <a href="product">product page</a>
          </div>

          <div className="footer-copyright">
            <i class="far fa-copyright"></i>
            <p id="copyright-year">{year}</p>
          </div>
        </div>
      </div>

    )
  }
}

export default Footer;

Upvotes: 1

Hari
Hari

Reputation: 136

One approach is using year a state variable and adding it to the code

import React from 'react';

class Footer extends React.Component {

       constructor(){
       this.state = {
           year : new Date().getFullYear()
       }
     }

render() {

  return (

      <div className="footer-section">
        <div className="footer-container">
          <div className="footer-site-links">
            <a href="about">about</a>
            <a href="newsletter">newsletter</a>
            <a href="product">product page</a>
          </div>

          <div className="footer-copyright">
            <i class="far fa-copyright"></i>
            <p id="copyright-year">{"Jon Nicholson " + this.state.year}</p>
          </div>
        </div>
      </div>

    )
  }
}

Upvotes: 1

DevLoverUmar
DevLoverUmar

Reputation: 14011

import React from 'react';

function YearCopyright() {
  return  <p id="copyright-year">Jon Nicholson  {new Date().getFullYear()}</p>;
}

class Footer extends React.Component {

  render() {

    return (

      <div className="footer-section">
        <div className="footer-container">
          <div className="footer-site-links">
            <a href="about">about</a>
            <a href="newsletter">newsletter</a>
            <a href="product">product page</a>
          </div>

          <div className="footer-copyright">
            <i class="far fa-copyright"></i>
            <YearCopyright />
          </div>
        </div>
      </div>

    )
  }
}

export default Footer;

Upvotes: 0

Related Questions