React - Map through array of objects

Question

Я могу отображать данные при использовании объекта, но при использовании массива некоторые из них не работают.

Ошибок в командной строке ничего не выдано.

Помогите оценить.

Благодаря

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

Вы должны использовать функцию .map() на самом массиве, который будет this.props.data:

<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"];