Reputation: 539
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
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