React Alt Componentten Üst Componente Veri Taşıma

React Alt Componentten Üst Componente Veri Taşıma

Nasıl Yaparız ?

React projelerinde componentler geliştirirken bazı durumlarda, alt componentten üst componente veri aktarmak durumunda kalabiliriz, tabiki de propslar aracalığıyla verilerimizi aktarabiliriz. Örneğin bir liste componentimiz olsun ve listeye yeni eleman eklendikçe çağırıldığı üst componente listeye eklemiş olduğu verileri göndermesi gerektiğini varsayalım ve bir örnek yapalım.

src/altcomponent.js adında bir dosya oluşturalım.

import React, { useEffect, useState } from "react";
const AltComponent = (props) => {
const [data, setData] = useState([1, 2, 3, 4]);
useEffect(() => {
props.veriTasi(data);
}, [data]);
return (
<>
<button
onClick={() => {
setData([...data, data.length + 1]);
}}
>
Yeni Ekle
</button>
{data.map((item) => (
<li>{item}</li>
))}
</>
);
};
export default AltComponent;

alt componentimiz statedeki veride herhangi bir değişiklik olduğunda useEffect hook’u ile dinlemekte ve gelen her veriyi props olarak gelen veriTasi fonksiyonuna göndermektedir.

src/App.js dosyamıza yazmış olduğumuz componentimizi kullanalım.

import React, { useState } from "react";
import AltComponent from "./altcomponent";
import "./styles.css";
export default function App() {
const [upData, setUpData] = useState([]);
return (
<div className="App">
{JSON.stringify(upData)}
<h1>Üst Component </h1>
<AltComponent
veriTasi={(veri) => {
setUpData(veri);
}}
/>
</div>
);
}

Herkese İyi Çalışmalar Dilerim. :)