Display element based on event fired and props passed in

I am trying, to manipulate another element, by, passing props directly to it, and then have it display itself. If I pass true/false.

Live running code:

https://codesandbox.io/s/keen-dan-rt0kj

• I don't know if it's possible to have a system of objects, and based on an event, tell a parent to display a child.

App.js

import React from "react";
import "./styles.css";
import Content from "./components/Content";

export default class App extends React.Component {
  state = {
    display: false
  };

  render() {
    return (
      <div className="App">
        <button onClick={() => this.setState({ display: !this.state.display })}>
          Display div
        </button>
        <Content display={this.state.display} />
      </div>
    );
  }
}

./components/Content.js:

import React from "react";

export default class Content extends React.Component {
  constructor(props) {
    super();
    this.state = {
      display: props.display
    };
  }

  render() {
    const { display } = this.state;
    return (
      <div
        id="mydiv"
        className="mydiv"
        style={{ display: display ? "block" : "none" }}
      >
        <h3>A simple div</h3>
      </div>
    );
  }
}

Goal: I want to based on a state, and based on fired event, display an element that already in store of root.

EDIT: I am aware that, this exists and can be used: import PropTypes from 'prop-types', however, I am not sure this is good practice, since it requires some parent or some other component to implement the props.

JUST Tried:

App:

<Content display={this.state.display} content={"Hello World"} />

Content:

<h3>{this.state.content}</h3>

It seems the passed in text, stored in Content state = {content: props.content} does get displayed, wheres, the boolean value does not work directly. Is there something wrong with sending in a bool ?