オブジェクトを反応のマップ関数でオブジェクトとして渡す方法

Question

子コンポーネントにpropsを渡そうとしています。私が得ている問題は、渡すべきプロパティの1つが配列であるということです。私は次のエラーを取得以下のように登録した小道具を渡すしようとした場合

{ 
    name: "Rowan Powell", 
    _id: "58658484d139c337601cfb6d", 
    updatedOn: "2016-12-29T21:47:48.185Z", 
    createdOn: "2016-12-29T21:47:48.185Z" 
}, 
{ 
    name: "Savannah Powell", 
    _id: "58658488d139c337601cfb6e", 
    updatedOn: "2016-12-29T21:47:52.145Z", 
    createdOn: "2016-12-29T21:47:52.145Z" 
} 

：配列は次のようになり登録もう少しコンポーネント整理であるために

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {name, _id, updatedOn, createdOn}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

return (
     <div> 
      {this.state.events.map((event, key) => { 
      return (
        <div key={key}> 
         <Event 
          title={event.title} 
          date={event.date} 
          time={event.time} 
          description={event.description} 
          presentor={event.presentor} 
          location={event.location} 
          registered={event.registrants} 
          max_reg={event.max_reg} 
          id={event._id} /> 
        </div> 
       ) 
      })} 
     </div> 
    ) 

Answer 1

はなっているはずです以下のコードのようなものです。親コンポーネントでは、Event子コンポーネントの配列を返す関数を実行できます。 mapの関数はrenderChildrenに配列を返します。したがって、その関数の結果を返すことができます。ご不明な点がございましたらお知らせください。

import React from 'react' 

// This is your child component: 
import Event from './Event' 


export default class Parent extends React.Component { 
    constructor() { 
    super() 

    this.state = {events: []} 
    } 
    renderChildren(events) { 
    return events.maps((event, key) => { 
     return (
     <div key={key}> 
      <Event 
      title={event.title} 
      date={event.date} 
      time={event.time} 
      description={event.description} 
      presentor={event.presentor} 
      location={event.location} 
      registered={event.registrants} 
      max_reg={event.max_reg} 
      id={event._id} 
      /> 
     </div> 
    ) 
    }) 
    } 
    render() { 
    return (
     <div className='ParentComponent'> 
     {this.renderChildren(this.state.events)} 
     </div> 
    ) 
    } 
} 

Answer 2

エラーが `Event`コンポーネントのレンダリングの内部でスローされているかのように、この

this.state= {events: [{ 
     name: "Rowan Powell", 
     _id: "58658484d139c337601cfb6d", 
     updatedOn: "2016-12-29T21:47:48.185Z", 
     createdOn: "2016-12-29T21:47:48.185Z" 
    }, 
    { 
     name: "Savannah Powell", 
     _id: "58658488d139c337601cfb6e", 
     updatedOn: "2016-12-29T21:47:52.145Z", 
     createdOn: "2016-12-29T21:47:52.145Z" 
    }]}; 
    // change key to index 
    return (
      <div> 
       {this.state.events.map((event, index) => { 
       return (
         <div key={index}> 
          <Event 
           title={event.title} 
           date={event.date} 
           time={event.time} 
           description={event.description} 
           presentor={event.presentor} 
           location={event.location} 
           registered={event.registrants} 
           max_reg={event.max_reg} 
           id={event._id} /> 
         </div> 
        ) 
       })} 
      </div> 
     )