React Child Component Not Rendering

Question

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.

Abdennour TOUMI · Accepted Answer · 2017-02-22 18:33:03Z

4

            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.

answered Feb 22, 2017 at 18:33

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

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

2 Comments

S. A. Malik Over a year ago

You are awesome. I have spend last 5 hours debugging that and could not figure out this thing. The components should always have camel case starting with a capital. You rock man!

Abdennour TOUMI Over a year ago

Your are Welcome 👋 .

Mayank Shukla · Accepted Answer · 2017-02-22 18:33:40Z

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>

Collectives™ on Stack Overflow

React Child Component Not Rendering

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related