Rendering css style applied React stateless functional statement

Question

I am trying to render component written in stateless functional component in React.js. when I tried to render code below, the element does not show up. React and React-Dom script files are properly inserted.

 const showMe = () => { return ( <div className="hi"></div> ) }; ReactDOM.render(showMe, document.getElementById("target")); 

 #target { position:absolute; left:0; right:0; margin:0 auto; top:50%; transform:translateY(-50%); border:1px solid red; width:600px; height:500px; } .hi { border:1px solid blue; position:absolute; width:50%; height:40%; left:0; right:0; margin:0 auto; top:50%; transform:translateY(-50%); } 

 <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="target"> </div> 

Answer 1

 const ShowMe = () => { return ( <div className="hi"></div> ) }; ReactDOM.render(<ShowMe />, document.getElementById("target")); 

 #target { position:absolute; left:0; right:0; margin:0 auto; top:50%; transform:translateY(-50%); border:1px solid red; width:600px; height:500px; } .hi { border:1px solid blue; position:absolute; width:50%; height:40%; left:0; right:0; margin:0 auto; top:50%; transform:translateY(-50%); } 

 <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="target"> </div> 

Answer 2

ReactDOM.render(< ShowMe />, document.getElementById("target"));