how do i print the array values and insert them in render?

const names = ["John", "Sara", "Michael", "Timothy"];
class Content extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <h1>Names</h1>
        {this.props.names ? (
          this.props.names.map((name, index) => (
            <p key={name + index}>{name}</p>
          ))
        ) : (
          <p>No names found</p>
        )}
      </div>
    );
  }
}

ReactDOM.render(<Content names={names} />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"> </div>