CODEWITHSUNDEEP
javascripthtmlsharepointreactjs
Snorlax
Snorlax

Reputation: 4745

React not rendering class

I believe I have a syntax area somewhere, but I can't figure it out.

Note: I am new to React and I am using Sharepoint to develop.

My Js file:

var newt = React.createClass({
    getInitialState: function () {
        return {
            greeting: 'This is really',
            thing: 'code stuff'
        };
    },
    render: function () {
        return (
            <div id="react-newt">
                {this.state.greeting} {this.state.thing}!
            </div>
        );
    }
});

$(function () {
    if (document.getElementById('newt')) {
        React.render(
            <newt />,
            document.getElementById('newt')
        );
        console.log('newt');
    }
});

And my HTML file:

<div id="newt"></div>

I inspect the console and I see this: Console

Upvotes: 0

Views: 103

Answers (1)

Michael Jungo
Michael Jungo

Reputation: 32982

You have to use a capitalised name for the component. JSX treats lowercase as a built-in HTML component. See User-Defined Components Must Be Capitalized for more details.

var Newt = React.createClass({
    getInitialState: function () {
        return {
            greeting: 'This is really',
            thing: 'code stuff'
        };
    },
    render: function () {
        return (
            <div id="react-newt">
                {this.state.greeting} {this.state.thing}!
            </div>
        );
    }
});

$(function () {
    if (document.getElementById('newt')) {
        React.render(
            <Newt />,
            document.getElementById('newt')
        );
        console.log('newt');
    }
});

Upvotes: 2

Related Questions