Bir React Bileşeninde İç İçe Bir Dizi Üzerinde Nasıl Eşlenir?

ByProgramlama Hocam

Şub 21, 2023 #araştırma, #bilişim, #haber, #kodlama, #programlama, #programlama haber, #teknoloji, #yazılım

Görüntülenme Sayısı: 194

React bileşenlerinde, iç içe bir dizi üzerinde gezinmek ve verileri render etmek için map() yöntemi kullanılır. Aşağıdaki örnek, bir iç içe dizideki her bir elemanı render etmenin nasıl yapılacağını gösterir:

Bir React Bileşeninde İç İçe Bir Dizi Üzerinde Nasıl Eşlenir?

import React from 'react';

function InnerListItem({ item }) {
  return <li>{item}</li>;
}

function OuterList({ outerArray }) {
  return (
    <ul>
      {outerArray.map((innerArray, outerIndex) => (
        <li key={outerIndex}>
          <ul>
            {innerArray.map((item, innerIndex) => (
              <InnerListItem key={innerIndex} item={item} />
            ))}
          </ul>
        </li>
      ))}
    </ul>
  );
}

Not: key prop’ları, React tarafından render edilirken elemanların eşlenmesi için kullanılır ve her eleman için benzersiz bir değer olmalıdır.