Need Help With React Calculator - Display Component Not Working Correctly

[DragonOsman]

As the title says, my calculator’s Display doesn’t work as expected; I passed in values for p elements to be displayed on the calculator’s screen, so that when the page first loads there’s a “0” there, but on page load the display screen is empty. And one I click something, the display element just collapses. I need help figuring out what I did wrong and how I should fix it.

Code is on GitHub here.

I also need to know if it’s okay to attach multiple event listeners in the same useEffect effect, or if I should make a different useEffect call for each event listener I need to add. Also, is it a good idea to use document.addEventListener or should I do it a different way?

Edit:
I tried doing console.log(Display.props.currentValue) in Display.js, here:

import React from "react";
import PropTypes from "prop-types";

const Display = props => {
  return (
    <div id="display">
      <p id="stored">{props.storedValue}</p>
      <p id="current">{props.currentValue}</p>
    </div>
  );
};
Display.propTypes = {
  storedValue: PropTypes.string.isRequired,
  currentValue: PropTypes.string.isRequired
};
console.log(Display.props.currentValue);

export default Display;

And it gives me this error:

TypeError: Cannot read property 'currentValue' of undefined

How did Display.props become undefined? I also experimented a bit by putting Display component’s definition inside App.js, but that didn’t work either.

Really. How do I fix this?