React’te JSON verilerinden tablo oluşturmak oldukça kolaydır. Bunun için, öncelikle JSON verilerinizi bir değişkende saklamalısınız. JSON verilerini state içerisinde saklamak en yaygın yaklaşımdır.
Ardından, verileri haritalama yöntemiyle (map method) işleyerek tablo içindeki satırları oluşturabilirsiniz. Bu, table etiketi içinde tr etiketleri oluşturarak yapılabilir.
İşte bir örnek kod parçası:
jsx
import React, { useState } from 'react';
function Tablo() {
const [veriler, setVeriler] = useState([
{id: 1, ad: 'Ahmet', soyad: 'Yılmaz', yas: 25},
{id: 2, ad: 'Ayşe', soyad: 'Kara', yas: 30},
{id: 3, ad: 'Mehmet', soyad: 'Sarı', yas: 35},
{id: 4, ad: 'Elif', soyad: 'Yeşil', yas: 40},
]);
return (
<table>
<thead>
<tr>
<th>ID</th>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
</thead>
<tbody>
{veriler.map(veri => (
<tr key={veri.id}>
<td>{veri.id}</td>
<td>{veri.ad}</td>
<td>{veri.soyad}</td>
<td>{veri.yas}</td>
</tr>
))}
</tbody>
</table>
);
}
export default Tablo;
Bu örnekte, veriler adlı bir state değişkeni tanımladık ve içine bir JSON veri kümesi yerleştirdik. Sonra, table etiketi içinde thead ve tbody etiketlerini kullanarak tablonun başlıklarını ve satırlarını oluşturduk.
Verileri map yöntemiyle haritaladık ve her bir veri öğesi için bir tr etiketi oluşturduk. Her tr etiketi içinde, verilerin sütunlarına karşılık gelen td etiketleri oluşturduk. key özelliği, her bir satırın benzersiz bir kimliğe sahip olduğunu belirtir ve React’in satırların değiştirilmesini hızlandırmasına yardımcı olur.
Böylece, yukarıdaki kod parçası, veriler adlı bir JSON veri kümesinden tablo oluşturmanın bir örneğidir.