⊗jsrtPmFmAOO 41 of 112 menu

React'ta Nesne Dizilerini Görüntüleme

Elimizde ürünlerle ilgili bir nesne dizisi olsun:

const prods = [ {name: 'product1', cost: 100}, {name: 'product2', cost: 200}, {name: 'product3', cost: 300}, ]; function App() { }

Her ürünü kendi paragrafında görüntüleyelim:

function App() { const res = prods.map(function(item) { return <p>{item.name} {item.cost}</p>; }); return <div> {res} </div>; }

Ürün adını ve fiyatını ayrı etiketlere koyabiliriz, örneğin şu şekilde:

function App() { const res = prods.map(function(item) { return <p> <span>{item.name}</span>: <span>{item.cost}</span> </p>; }); return <div> {res} </div>; }

key özniteliğini eklemeyi unutmayalım:

function App() { const res = prods.map(function(item, index) { return <p key={index}> <span>{item.name}</span>: <span>{item.cost}</span> </p>; }); return <div> {res} </div>; }

App bileşeninde aşağıdaki dizi verilmiştir:

const users = [ {name: 'user1', surn: 'surn1', age: 30}, {name: 'user2', surn: 'surn2', age: 31}, {name: 'user3', surn: 'surn3', age: 32}, ];

Bu dizinin elemanlarını ul listesi şeklinde görüntüleyin.

Türkçe
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenЎзбекOʻzbekTiếng Việt
Web sitesinin çalışması, analiz ve kişiselleştirme için çerezleri kullanıyoruz. Veri işleme, Gizlilik Politikası'na uygun olarak gerçekleşir.
tümünü kabul et özelleştir reddet