0

Why is my second component not loading in the first component? Here is the code:

var ComponentOne = React.createClass({
    render: function(){
      return(
        <div>
          <h1>ComponentOne</h1>
          <componentTwo />
        </div>
      )
    },
  });

  var componentTwo = React.createClass({
    render: function(){
      return(
        <div>
          <h2> componentTwo </h2>
        </div>
      )
    }
  })

Here I have added second component in the first component by <componentTwo /> but still not displaying.

Here is a Plunker.

halfer
  • 19,824
  • 17
  • 99
  • 186
Ramana Uday
  • 355
  • 2
  • 6
  • 21
  • Possible duplicate of [React - Adding component after AJAX to view](http://stackoverflow.com/questions/41216654/react-adding-component-after-ajax-to-view) – Shubham Khatri Apr 11 '17 at 10:44

1 Answers1

2

Just start your component2 with capital letter and it would work

something like

var ComponentOne = React.createClass({
    render: function(){
      return(
        <div>
          <h1>ComponentOne</h1>
          <ComponentTwo />
        </div>
      )
    },
  });

  var ComponentTwo = React.createClass({
    render: function(){
      return(
        <div>
          <h2> componentTwo </h2>
        </div>
      )
    }
  })

Why capitals? explanation can be found here https://stackoverflow.com/a/30373505/2551236

Hope this helps!

Good luck!

Community
  • 1
  • 1
Vihar
  • 3,626
  • 2
  • 24
  • 47
  • Can I know why capitals for components name. – Ramana Uday Apr 11 '17 at 10:26
  • 1
    @RamanaUday custom components must start with capital letters as built in components (`div`, `h1`, `p`, etc.) use lowercase. See [the documentation](https://facebook.github.io/react/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized) for more details. – Michael Peyper Apr 11 '17 at 10:28
  • @RamanaUday if this answer helps you, please accept it so that others facing same issue can get the problem solved – Vihar Apr 11 '17 at 10:37