React.createElement: тип не должен иметь значение null, undefined, boolean или number. Он должен быть строкой (для элементов DOM) или ReactClass

Question

В начале я скажу, что знаю, что есть похожие вопросы, но, к сожалению, я не мог найти там никакого ответа .. так как большая часть темы была около getInitialState проблема Я strugglig здесь пытаюсь получить данные с точкой зрения из массива имеет id,name and surname. кажется, что работает почти рядом с частью ошибки, что это привычка, чтобы сделать это описания ошибки, которые я получил в консоли:

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`. 

Это связано с тем, что он задан как .toString()? или что-то. Я понятия не имею, чтобы быть честным, я реагирую новичку.

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 Если есть недостаток информации, скажите мне. Я буду стараться, чтобы принести больше @_ @

@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 1

Для меня, вы должны держать в props.data только данные для HeaderMiniComment, а также осуществлять карту, как здесь (HeaderMiniComment является внешний компонент)

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