CODEWITHSUNDEEP
javascriptreactjs
Arian
Arian

Reputation: 7719

React element appears in chrome react dev tool but not in DOM

I have a nested React component. A userList which contains a list of userRows and lets me add new userRows. When I load this page in chrome , I can see the components in chrome's React dev tool , but I don't see anything in the the DOM. On the other hand, when I load this page in firefox I can see userRow elements (which are not rendered to html and are still rendered as <userRow> in the DOM. I don't see any rendered userRow in firefox or chrome.

Why does this happen ? and how can I make it really render ?

userList: 

render: function() {
    var users = this.state.users;
    var usersList = [];
    for (var i = 0; users.value !== undefined && i < users.value.length; i++) {
        usersList.push(<userRow userName={users.value[i].userName} socket={socket} userId={users.value[i].userId}/>);
    }
    var window =
        <div>
            <input type="text" id="userNameBox" ref="userNameBox"></input>
            <input type="button" onClick={this._addNewUser} value="add user" id="add"/>
            {usersList}
        </div>;
    return (window);
}

userRow : 

'use strict';

var React = require('react');

var userRow = React.createClass({

    displayName: 'userRow',

    propTypes: {},

    mixins: [],

    getDefaultProps: function() {
        return ({
            userId: 0,
            userName: '',
            socket: null
        });
    },
    componentWillMount: function() {
        this.setState({
            userId: this.props.userId,
            userName: this.props.userName,
            socket: this.props.socket
        });
    },
    //componentDidMount: function() {
    //    socket = io.connect();
    //    socket.on('messageList', function(messages) {
    //        this.setState({
    //            messages: messages
    //        });
    //    }.bind(this));
    //},
    getInitialState: function() {
        return ({
            userId: 0,
            userName: '',
            socket: null
        });
    },
    _deleteUser: function(){
        var socket = this.state.socket;
        socket.emit('deleteUser', {userId: this.state.userId});
    },
    render: function() {
        return(
            <div>
                <span>{this.state.userName}</span>
                <input type="button" onClick={this._deleteUser} value="delete user" id="deleteUserButton"/>
            </div>
        );
    }
});

module.exports = userRow;

Upvotes: 0

Views: 1627

Answers (1)

noveyak
noveyak

Reputation: 3300

I think React expects your class names to begin with a capital letter.

React can either render HTML tags (strings) or React components (classes).

To render a HTML tag, just use lower-case tag names in JSX:

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

https://facebook.github.io/react/docs/jsx-in-depth.html

So in your code

var userRow = React.createClass

should be 

var UserRow = React.createClass

and

 for (var i = 0; users.value !== undefined && i < users.value.length; i++) {
        usersList.push(<UserRow userName={users.value[i].userName} socket={socket} userId={users.value[i].userId}/>);
    }

Finally, I would avoid assigning to the var window and chose a different word since that already has meaning in javascript.

Upvotes: 2

Related Questions