Unable to load second component in first component in ReactJS

Question

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.

Possible duplicate of React - Adding component after AJAX to view — Shubham Khatri
– Shubham Khatri, Commented Apr 11, 2017 at 10:44

Community · Accepted Answer · 2017-05-23 12:25:33Z

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!

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Apr 11, 2017 at 10:25

Vihar

3,8292 gold badges26 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ramana Uday Over a year ago

Can I know why capitals for components name.

Michael Peyper Over a year ago

@RamanaUday custom components must start with capital letters as built in components (div, h1, p, etc.) use lowercase. See the documentation for more details.

Vihar Over a year ago

@RamanaUday if this answer helps you, please accept it so that others facing same issue can get the problem solved

Collectives™ on Stack Overflow

Unable to load second component in first component in ReactJS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related