Props'un 4 Hali

Props'un 4 Hali

·

2 min read

Bu yazı üzerinde github repomda props gönderimine ilişkin yaptığım 4’li sınıflamayı sizlerle paylaşacağım. Bu yazı temel React bilgisine sahip yada React’a yeni giriş yapanlar için faydalı olacaktır.

npx create-react-app my-props

Öncelikle yazı boyunca değişmeyecek veri setimizi Data.js sayfasına atalım.

Data.js sayfasında bulunan verileri App.js ve Explorer.js yardımıyla görüntüleyeceğiz.

Çalışma 1 (App.js ve Explorer.js)

App.js

const Veriler = Data.map((index) => {
    return <Explorer ad={index.ad} yas={index.yas} />;

Explorer.js

export default function Explorer({ ad, yas}) {
  return (
    <>
      <h3>{ad}</h3>
       <h5>{yas}</h5>
      <hr />
    </>
  );
}

App.js sayfasında map fonksiyonu ile 2 parçaya ayırdığımız ve Explorer.js sayfasına yolladığımız verileri Explorer.js sayfasında süslü parantez içinde karşılayarak “props” kullanmıyoruz.

Çalışma 2 (App2.js ve Explorer2.js)

App2.js

const Veriler = Data.map((index) => {
    return <Explorer ad={index.ad} yas={index.yas} />;
  });

Gördüğünüz gibi App.js üzerinde herhangi bir değişikliğe gitmedik.

Explorer2.js

import React from "react";

export default function Explorer2(props) {
  return (
    <>
      <h3>{props.ad}</h3>
       <h5>{props.yas}</h5>
      <hr />
    </>
  );
}

Explorer2.js sayfasında gelen verileri props kullanarak çektik.

Çalışma 3 (App3.js ve Explorer3.js)

App3.js

const Veriler = Data.map((index) => {
    return <Explorer index={index}/>;
  });

App3.js diğer örneklerden farklı olarak Data sayfasından aldığımız verileri ayrıştırmadan doğrudan Explorer’a yolluyor.

Explorer3.js

export default function Explorer3({index}) {
  return (
    <>
      <h3>{index.ad}</h3>
       <h5>{index.yas}</h5>
      <hr />
    </>
  );
}

Explorer3.js üzerinde süslü parantezlerle index’i alıp map ile ayrıştırmaya gerek duymadan doğrudan ad ve yas verilerine ulaşıyoruz.

Çalışma 4 (App4.js ve Explorer4.js)

App4.js

const Veriler = Data.map((index) => {
    return <Explorer {...index} />;
  });

App4.js sayfasında {...index} kullanarak verileri Explorer4.js sayfasına gönderiyoruz.

Explorer4.js

export default function Explorer4({ad, yas}) {
  return (
    <>
      <h3>{ad}</h3>
       <h5>{yas}</h5>
      <hr />
    </>
  );
}

Gelen verinin alt kalemlerini doğrudan süslü parantez ile karşılayıp çekiyoruz.

Faydalı olması dileğiyle.

VeriDelisi

Did you find this article valuable?

Support Buildchain by becoming a sponsor. Any amount is appreciated!