CODEWITHSUNDEEP
reactjsjsx
S. A. Malik
S. A. Malik

Reputation: 3655

React Child Component Not Rendering

I am creating hierarchical React Component using JSX. The code does not show any errors but nothing shows up on my page. Here is my code below. 

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>React Test</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script type="text/babel">
        var Converter = React.createClass({
            render: function() {
                return <inputBox />;
            }
        });

        var inputBox = React.createClass({
            render: function() {
                return <h1>Hello World!</h1>;
            }
        });

        ReactDOM.render(
            React.createElement(Converter, null),
            document.getElementById('app'),
        );
    </script>
</body>
</html>

when i use 

ReactDOM.render(
    React.createElement(inputBox, null),
    document.getElementById('app')
);

Hello World! Shows up. What am I doing wrong? I have tried debugging a lot but could not figure out anything.

Upvotes: 1

Views: 312

Answers (2)

Mayank Shukla
Mayank Shukla

Reputation: 104359

instead of

var inputBox = React.createClass({

Use this:

var InputBox = React.createClass({

Because react component must start with uppercase otherwise it will be treated as html elements.

Check the working snippet:

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>React Test</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script type="text/babel">
        var Converter = React.createClass({
            render: function() {
                return <InputBox />;
            }
        });

        var InputBox = React.createClass({
            render: function() {
                return <h1>Hello World!</h1>;
            }
        });

        ReactDOM.render(
            <Converter/>,
            document.getElementById('app'),
        );
    </script>
</body>
</html>

Upvotes: 1

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93163

            return <InputBox />;

and NOT

            return <inputBox />;

Do not use lowercase when you are initiating react component. Otherwise, it will be considered as simple HTML tag.

Upvotes: 4

Related Questions