Question

19

Render new element onClick in react.js

rated 0 times [ 21] [ 2] / answers: 1 / hits: 18214 / 9 Years ago, wed, april 22, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

makaylahh

Add To Favorites

Follow

Total Points: 128

Total Questions: 106

Total Answers: 97

Location: Tanzania

Member since Wed, Feb 24, 2021

3 Years ago

answered 9 Years ago jaelyn · Accepted Answer

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'));