I'm new to react and am trying to render a new element onClick:

      var LoginButton = React.createClass({
       ..............
       ..............
      clickHandle : function() {
        this.rememberMe = {
            active: localforage.getItem('rememberMe', function (err, key) {
                return key;
            })
        };
        if (this.rememberMe.active == true || this.rememberMe.active == 'checked')
        {
            document.getElementById('loginForm').submit();
        }
        else {
            React.render(<wantToRemember />, document.getElementById('loginbuttonhere'));
        }
        return this.rememberMe.active;

    },

This is the element that should appear:

var wantToRemember = React.createClass({
        getInitialState : function () {
            return {
                position: 'absolute',
                display: 'block',
                top: '20px',
                width: '100px',
                height: '100px'
            }
        },

        render : function () {
            return (
                    <div className="rememberPopup" style={this.state}>
                        <div className="row">
                            <div className="staylogin">
                                <div className="col-md-4">
                                    <label for="checkbox">Angemeldet bleiben</label>
                                </div>
                                <div className="col-md-1">
                                    <input type="checkbox" id="checkbox" name="remember" />
                                    </div>
                                </div>
                            </div>
                    </div>
            );
        }
    });

but it doesn't appear, instead react renders this html:

<wanttoremember data-reactid=".1"></wanttoremember>

I'm pretty sure I'm doing some pretty basic stuff wrong, but can't figure out what. Isn't it possible to call different elements like this?

I'm new to react and am trying to render a new element onClick:

      var LoginButton = React.createClass({
       ..............
       ..............
      clickHandle : function() {
        this.rememberMe = {
            active: localforage.getItem('rememberMe', function (err, key) {
                return key;
            })
        };
        if (this.rememberMe.active == true || this.rememberMe.active == 'checked')
        {
            document.getElementById('loginForm').submit();
        }
        else {
            React.render(<wantToRemember />, document.getElementById('loginbuttonhere'));
        }
        return this.rememberMe.active;

    },

This is the element that should appear:

var wantToRemember = React.createClass({
        getInitialState : function () {
            return {
                position: 'absolute',
                display: 'block',
                top: '20px',
                width: '100px',
                height: '100px'
            }
        },

        render : function () {
            return (
                    <div className="rememberPopup" style={this.state}>
                        <div className="row">
                            <div className="staylogin">
                                <div className="col-md-4">
                                    <label for="checkbox">Angemeldet bleiben</label>
                                </div>
                                <div className="col-md-1">
                                    <input type="checkbox" id="checkbox" name="remember" />
                                    </div>
                                </div>
                            </div>
                    </div>
            );
        }
    });

but it doesn't appear, instead react renders this html:

<wanttoremember data-reactid=".1"></wanttoremember>

I'm pretty sure I'm doing some pretty basic stuff wrong, but can't figure out what. Isn't it possible to call different elements like this?

• javascript
• reactjs

2 Answers 2

Your react.js component name begins with a lower-case letter, it should start with an upper-case leter: var WantToRemember = React.createClass(...) and React.render(<WantToRemember />,....

The JSX compiler requires for component names to begin with an upper-case letter (see jsx docs on this):

To render a React Component, just create a local variable that starts with an upper-case letter:

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.getElementById('example'));

You should pass a React element to React.render instead of the tag itself, something like this:

React.render(
  React.createElement(wantToRemember)
);