<div id="root"></div>
class Printer extends React.Component {
  constructor(props) {
    super(props);
  }
  
 
  render() {
    let childCount = React.Children.count(this.props.children);
    let message;
    
    if (childCount < 1) {
      message = (
        <span>js type: {typeof(this.props.value)}</span>
      );
    } else {
      message = (<span>not a js type: {this.props.children}</span>);
    }
    
    return (<h1>{message}</h1>);
  }
}
    
function Func() {
  return 1;
}

function Child() {
  return 'I am a child component!';
}

function App() {
  return (
    <div>
<Printer value="i am a string" /><br />
<Printer value={true} /><br />
<Printer value={Func} /><br />     
<Printer><Child/></Printer>
    </div>
  );
}


ReactDOM.render(<App />, document.getElementById('root'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react/umd/react.development.js
  2. https://unpkg.com/react-dom/umd/react-dom.development.js