I have a simple React component like this inside file components/daw/index.js. It should render just a text:

import React from 'react';

export default class Daw extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="daw-container" key="daw-container">
                <span>DAW placeholder</span>
            </div>
        );
    }
}

I'm using the above component by another React component. Inside the file components/media-viewer/VideoViewer/index.js I have:

export default class VideoViewer extends React.PureComponent {

  render() {
    return (
      <div>
          <Daw/>
      </div>
    );
  }

}

The simple text DAW placeholder is not showing up on UI. Am I missing something obvious? Is something trivial missed?

class Daw extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="daw-container" key="daw-container">
                <span>DAW placeholder</span>
            </div>
        );
    }
}
class VideoViewer extends React.PureComponent {

  render() {
    return (
      <div>
          <Daw/>
      </div>
    );
  }

}

ReactDOM.render(<VideoViewer />, 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>