問題を使用してオブジェクトを取得する問題

Question

私は成功なしでReactを使用してオブジェクトからarrivalに到達しようとしています。私は間違って何をしていますか？

HTML

<div id="main"></div> 

JS

const buses = 
    [{ "id": 1, "busNumber": "55", "arrival": "1 min"}, { "id": 2, "busNumber": "13", "arrival": "1 min"}, { "id": 3, "busNumber": "55", "arrival": "3 min"}] 

const List = ({items, each}) => 

    <div className = "panel panel-default"> 
    <div className = "panel-heading"><h2>Bus stop</h2></div> 
    <div className = "panel-body"> 

     <ul className = "list-group">{items.map((item, key) => 
     <ListItem key = {key} item = {each(item)} />)}</ul> 

    </div> 
    </div> 

const ListItem = ({item, arrival}) => 
    <li className = "list-group-item"><span className = "badge">{arrival}</span>{item}</li> 


const Item = ({busNumber}) => 
    <div>{busNumber}</div> 

ReactDOM.render(<List items={buses} each={Item} />, document.querySelector('#main')) 

CodePen

私が反応するように新しいですので、基本的なミスのために私を許してください。前もって感謝します。

Answer 1

あなたは到着の値をListItemに渡していないためです。

使用この：

<ListItem key={key} item={each(item)} arrival={item.arrival}/> 

CodePen作業。