I have created a simple React component which displays another react component. But it doesn't render in browser :

class Home extends React.Component {

  render() {

    return (

      <div>

        <map/>

      </div>   

    );

  }

}



var map = React.createClass({

   render: function() {

      return (

          <div id=map-canvas>

            <span>hello</span>

          </div>

      );

    }

});

I'm expecting the hello to show up on the screen, but nothing shows up and when I inspect the element all I can see is

<map data-reactid=.0.0></map>

Can any one point our what might be wrong.