Harugawa Harugawa - 1 month ago 11
Javascript Question

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

Answer

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'}, {...}, ...];