React - オブジェクトの配列を使ってマップする

Question

オブジェクトを使うときだけデータをマップすることができますが、配列を使用するときには動作しません。

コマンドラインにエラーは出力されません。

ヘルプありがとうございます。あなたはthis.props.dataされるであろう、配列自体に.map()機能を使用する必要が

おかげ

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class JoeApp extends React.Component { 
    render() { 
     var data = [ 
      { 
       name: "Joe", 
       age: 27 
      }, 
      { 
       name: "John", 
       age: 27 
      }, 
      { 
       name: "Bill", 
       age: 25 
      } 
     ]; 

     return (
      <Data data={data} /> 
     ); 
    } 
} 

class Data extends React.Component { 
    render() { 
     return (
      <div>{this.props.data.name.map((info) => info.name})}</div> 
     ); 
    } 
} 

ReactDOM.render(<JoeApp />, document.body); 

Answer 1

：

<div>{this.props.data.map((elem) => elem.name})}</div> 

これは、オブジェクトの配列を変換します：

var data = [ 
     { 
      name: "Joe", 
      age: 27 
     }, 
     { 
      name: "John", 
      age: 27 
     }, 
     { 
      name: "Bill", 
      age: 25 
     } 
    ]; 

name文字列の配列に：

var data = ["Joe", "John", "Bill"];