JSXでデータをループする方法

Question

こんにちは私はこのデータを自分のUIに表示します。 私はあなたたちが私を与えることができる、それのまわりで私の頭をラップカントループデータを試してみて、私はJSX

内部ループにできるようにしたいと思い李さん

にProductTypeIDとProductTypeNameを表示することができるようにしたいですヒント？私は本当に良い仕事をしているデータとループそれを真実。

[{ 
    "ProductTypeID": 14, 
    "ProductTypeName": "ItemName1", 
    "ProductTypeImageUrl": "", 
    "ProductTypeThumbUrl": "", 
    "ProductTypeIconUrl": "", 
    "IsActive": 1, 
    "ProductTypeBlueImage": null, 
    "Is3HourRent": null 
}, { 
    "ProductTypeID": 1, 
    "ProductTypeName": ItemName2", 
    "ProductTypeImageUrl": "", 
    "ProductTypeThumbUrl": "", 
    "ProductTypeIconUrl": "", 
    "IsActive": 1, 
    "ProductTypeBlueImage": null, 
    "Is3HourRent": false 
}, { 
    "ProductTypeID": 10, 
    "ProductTypeName": "ItemName3", 
    "ProductTypeImageUrl": "", 
    "ProductTypeThumbUrl": "", 
    "ProductTypeIconUrl": "", 
    "IsActive": 1, 
    "ProductTypeBlueImage": null, 
    "Is3HourRent": true 
}] 

Answer 1

render() { 
var data = [{ 
    'ProductTypeID': 14, 
    'ProductTypeName': 'ItemName1' 
}, 
{ 
    'ProductTypeID': 15, 
    'ProductTypeName': 'ItemName2' 
}]; 

return (<ul> 
    {data.map((item) => { 
    return (<li key={item.ProductTypeID}> 
    <span>ID: {item.ProductTypeID}</span> 
    <span>Name: {item.ProductTypeName}</span> 
    </li>); 
    })} 
</ul>); 
} 

Answer 2

あなたはmapを使用してレンダリングする方法で、このような何かを行うことができます。

render(){ 
    return <ul> 
     {data.map(item => <li key={item.ProductTypeID}>{item.ProductTypeID}</li>)} 
     </ul> 
}