CODEWITHSUNDEEP
javascriptreactjs
Harugawa
Harugawa

Reputation: 539

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass

At the start I will say that I know that there are similiar questions, but sadly I couldn't find any answer there.. since most of theme was about getInitialState problem I'm strugglig here trying to fetch data to the view from an array the has id,name and surname. It seems that is almost works beside the error part that It wont to render it Error description that I got in console:

React.createElement: type should not be null, undefined, boolean, or number. 
It should be a string (for DOM elements) or a ReactClass (for composite components). 
Check the render method of `Reapeter`.

Does it have something to do with it to being specified like .toString()? or something. I've got no idea to be honest, Im a react newbie.

var Reapeter = React.createClass({
render: function(){
    var foreach = this.props.data.map(function(HeaderMiniComment){
        return(
            <HeaderMiniComment name={HeaderMiniComment.name} surname={HeaderMiniComment.surname} key={HeaderMiniComment.id}/>
        )
    });
    return(
        <div>
            {foreach}
        </div>
    );
}
});

@Edit If there is lack of info, tell me. I'll try to bring more @_ @

@the HeaderMiniComment

var HeaderMiniComment = React.createClass({
render:function(){
    return(
        <div>
            <span><p>{this.props.name}</p></span>
            <br />
            <span style={{color:'red'}}><p>{this.props.surname}</p></span>
        </div>
    )
}
});

Upvotes: 0

Views: 524

Answers (1)

jonzee
jonzee

Reputation: 1609

For me, you should keep in props.data only data for HeaderMiniComment, and implement map as here (HeaderMiniComment is outer component)

var foreach = this.props.data.map(function(item){
    return(
        <HeaderMiniComment name={item.name} surname={item.surname} key={item.id}/>
    )
});

var HeaderMiniComment = React.createClass({
render:function(){
    return(
        <div>
            <span><p>{this.props.name}</p></span>
            <br />
            <span style={{color:'red'}}><p>{this.props.surname}</p></span>
        </div>
    )
}
});

data = [{id: 1, name: 'John', surname: 'Kennedy'}, {...}, ...];

Upvotes: 2

Related Questions