CODEWITHSUNDEEP
reactjscomponents
knbibin
knbibin

Reputation: 1221

React child componet is not rendering in main component

I'm new to reactjs and I'm facing some issues while creating a simple react app. The child component is not rendering to main component. I'm not getting any console error, but the child component UI is not getting displayed in main component.I have a child component like below

var React = require('react');
var ReactDOM = require('react-dom');

var NavBar = React.createClass({

render: function () {

    return (
        <div className="navbar navbar-default">
                    <div className="container">
                        <div className="navbar-header pull-left">
                            <ul className="nav navbar-nav">
                                <li className="active"><a>Home<span className="sr-only">(current)</span></a></li>
                            </ul>
                        </div>
                        <div className="navbar-header pull-right">
                            <ul className="nav navbar-nav navbar-right">
                                <li className="dropdown">
                                    <a id="userAdsId" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Welcome, Bibin</a>
                                </li>
                            </ul>
                        </div>
                    </div>
        </div>
    )

}

});

module.exports = NavBar

below is the main component

var React = require('react');
var ReactDOM = require('react-dom');

var navbar = require('./navBar');

ReactDOM.render(<navbar/>,document.getElementById('ContactForm'))

Anyone please help

Upvotes: 0

Views: 549

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104529

Issue is in this line:

var navbar = require('./navBar');

Instead of the use this:

var Navbar = require('./navBar');

It will work.

Reason: In JSX, lower-case names are considered as HTML tags. So Its a rule that all React components must start with a upper case letter.

Upvotes: 1

Related Questions