React.js: Should JavaScript date object be treated as props or state?

Question

Probably it's natural that everyone starting with React, experiences confusion between props and state.

There is a common distinction that if a component needs to change one of its attributes at some point in time, state should be used, otherwise it should be a prop.

I came up to a point where I decided to implement a copyright date in the footer. You can see it in the example bellow:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      copyrightYear: new Date("2019").getFullYear(),
      currentYear: new Date().getFullYear()
    };
  }
render() {
    return (
      <div className="container">
        <Header />
        <MainContent />
        <Footer
          handleCopyrightDate={() => {
            if (this.state.currentYear === this.state.copyrightYear) {
              return (
                <h3>
                  Copyright &copy; {this.state.copyrightYear}. Company Name
                </h3>
              );
            } else if (this.state.currentYear > this.state.copyrightYear) {
              return (
                <h3>
                  Copyright &copy; {this.state.copyrightYear} -
                  {this.state.currentYear}. Company Name
                </h3>
              );
            }
          }}
        />
      </div>
    );
  }
}
const Footer = props => {
  return (
    <footer className="footer">
      <div className="copyright">{props.handleCopyrightDate()}</div>
    </footer>
  );
};
const appRoot = document.querySelector("#app");
ReactDOM.render(<App />, appRoot);

In the beginning I decided to move on with a state, but now I start to doubt, does this small code snippet should really be in need of a state? If yes, where should I include setState? Should I create setInterval and make it change every year or should I pass it through props?

I just one the start year or copyright year to be a constant value and the current year to autoupdate every time the year changes.

Is `copyrightYear` a constant value? Is it important for you to auto-update the footer when the current year changes? — Pipe, Feb 12 '20 at 19:03
I would like the Copyright date format would be startYear - currentYear, after the startYear is no longer a currenYear. Would you suggest to change the start year into sole number instead of putting it into js date object? — Linas M., Feb 12 '20 at 19:12
In which cases a copyRight year is different from currentYear? I mean.. every site i visit always shows a copyright notice with current year... If is important for you to auto update footer if user pass from 31-12-2020 to 01-01-2021 with the browser opened) then you should use your state and set an interval to recalculate the current year. If is not important, i would choose to calculate it one time in the render function. — Pipe, Feb 12 '20 at 19:39
"to auto update footer if user pass from 31-12-2020 to 01-01-2021 with the browser opened" - now it clicks to me! I got the point why state might be useful and why not in this case. I'll go with the props. Thank you! — Linas M., Feb 12 '20 at 20:15

score 3 · Answer 1 · answered Feb 12 '20 at 18:42

I wouldn't use either:

const Footer = () => {
  const copyrightYear = new Date("2019").getFullYear();
  const currentYear = new Date().getFullYear();
  const year = currentYear === copyrightYear
    ? (
      <h3>
        Copyright &copy; {this.state.copyrightYear}. Company Name
      </h3>
    )
    : (
      <h3>
        Copyright &copy; {copyrightYear} - {currentYear}. Company Name
      </h3>
    )

  return (
    <footer className="footer">
      <div className="copyright">{year}</div>
    </footer>
  );
};

Alternatively, you know it's not 2019 anymore so you could just render

<footer className="footer">
  <div className="copyright">2019 - {new Date().getFullYear()}</div>
</footer>

The 2019 is just an example. It could be changed to 2020 waiting for another year to come, so I appreciate the first example. But speaking about the difference between props and state, should I think in this way: a user interaction cannot affect the copyright date in anyway, that's why it should be a prop and not a state? — Linas M., Feb 12 '20 at 18:55

React.js: Should JavaScript date object be treated as props or state?

1 Answers1