Simple React component not rendering

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.

Answers 1

  • JSX expects component tags to be capitalized. Otherwise, it will just create a DOM element with the provided tag. See HTML Tags vs. React Components.

    <map /> compiles to React.createElement("map", {}); while <Map /> compiles to React.createElement(Map, {});.

    Just rename map to Map and you're good.


Related Articles