React’te JSON Verilerinden Tablo Oluşturma Nasıl Yapılır?

React’te JSON verilerinden tablo oluşturmak için aşağıdaki adımları takip edebilirsiniz:

Verileri Alın: İlk adım, JSON verilerini uygulamanıza getirmektir. Bu veriler, sunucudan veya bir API’dan gelen veriler olabileceği gibi, dosyadan da okunabilir.

Verileri Map İşlemine Tabi Tutun: Verileri, map() fonksiyonunu kullanarak döngüye alın. Her bir veri nesnesini tek tek ele alın ve tablo satırı oluşturmak için gerekli HTML etiketlerini oluşturun.

Tablo Etiketlerini Kullanın: Verileri içeren tablo satırlarını, <table>, <thead>, <tbody> ve <tr> gibi HTML tablo etiketlerini kullanarak oluşturun. Her bir veri nesnesini, bir <tr> etiketi içinde gösterin ve her veri öğesini de bir <td> etiketi içinde gösterin.

Verileri Render Edin: Son olarak, oluşturduğunuz tablo etiketlerini React componenti içinde render() fonksiyonu içinde gösterin.

Aşağıdaki örnek, verileri içeren bir JSON dizisinden bir tablo oluşturmanın nasıl yapılabileceğini gösterir:

import React from 'react';

const data = [
  {id: 1, name: "John Doe", age: 32},
  {id: 2, name: "Jane Doe", age: 28},
  {id: 3, name: "Jim Smith", age: 40}
];

class Table extends React.Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {data.map(item => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default Table;