copyright is null, how do I make it so it runs after fully rendered?

March 23, 2022

export default function App() {
  const [loading, setLoading] = useState(true);

  /* on mount */
  useEffect(() => {
    /* fetch data */
    setLoading(false);
    var today = new Date();
    var year = today.getFullYear();
    var copyright = document.getElementById("copyright");
    copyright.innerHTML = "© name " + year;
  }, []);

  if (loading) {
    return <></>;
  }

  return (
    <div className="App">
      <div id="copyright"></div>
    </div>
  );
}

https://codesandbox.io/s/cool-moon-twbl7t?file=/src/App.js

I added loading since i dont want to render until i fetched all my data but now im unsure where to add my copyright without erroring.

>Solution :

Don’t use native DOM methods in React unless there’s no other decent option. Here, there is just put the year inside {}s inside the copyright div. You’re already using conditional rendering.

const App = () => {
  const [loading, setLoading] = React.useState(true);
  React.useEffect(() => {
    setLoading(false);
  }, []);
  return loading ? false : (
    <div className="App">
      <div id="copyright">{new Date().getFullYear()}</div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>