Props : Bir component’e dışarıdan gelen verinin tutulduğu yapıdır. Props’lar sayesinde componentler arasında değer taşıması gerçekleştirilebilir.
Örneğin bir listeden seçilen Item’ın unique id’si alınarak, farklı bir componente o id ile detay bilgilerine ulaşılması işleminde id’ye ulaşılması props’lar sayesinde olur.
Burada önemli olan nokta, props’dan alınacak değişken adı ne ise tanımlanan değişken adının da aynı olmasıdır. Bir diğer nokta ise props’ların taşındığı component içersinde değiştirilemiyor olmasıdır.
Müşterilerin listelendiği CustomerList.js componenti aşağıdaki şekildedir. Bu componentlerde müşteri ismini, CustomerDetail.js component’inde ise müşteriye ait unique id’nin nasıl taşındığına bakacağız.
Burada customer adında bir liste oluşturduk ve return ifadesinin içerisinde de bu listedeki name değişken değerlerini listeledik.
Burada function component kullanmış olduk, bu sebeple sadece return değeri yer almaktadır.
Bir diğer nokta ise, listenin her bir item’ı için customers.map ifadesi kullanılmış oldu, bir diğer deyişle for döngüsü yazmış olduk. Burada önemli olan nokta ise, listenin her bir item’ı için unique bir key set edilmiş olmasıdır, aksi durumda key set edilmeden kullanılmadığı durumda console’dan baktığınızda unique bir id’nin set edilmesi için uyarı mesajı görürsünüz.
CustomerList.js
import React from 'react';
function CustomerList()
{
const customers = [
{id:1, name:'customer1'},
{id:2, name:'customer2'},
{id:3, name:'customer3'}];
return(
<div>
<ul>
{customers.map((t)=>
<li key={t.id}>{t.name}</li>
)}
</ul>
</div>
);
}
export default CustomerList;Burada customer adında bir liste oluşturduk ve return ifadesinin içerisinde de bu listedeki name değişken değerlerini listeledik.
Burada function component kullanmış olduk, bu sebeple sadece return değeri yer almaktadır.
Bir diğer nokta ise, listenin her bir item’ı için customers.map ifadesi kullanılmış oldu, bir diğer deyişle for döngüsü yazmış olduk. Burada önemli olan nokta ise, listenin her bir item’ı için unique bir key set edilmiş olmasıdır, aksi durumda key set edilmeden kullanılmadığı durumda console’dan baktığınızda unique bir id’nin set edilmesi için uyarı mesajı görürsünüz.
Bir sonraki adım olan CustomerDetail.js componentinde ise props ifadesini yer almaktadır. Bu ifade ile birlikte CustomerList componentinde beslenen değerlere ulaşılabilmektedir.
Gelen ifadenin id keyword’ü ile birlikte gelmesi önemli olan noktadır.
import React from 'react';
function CustomerDetail(props)
{
return(
<div>
<p><b>customer Id(CustomerDetail) :</b> {props.id}</p>
</div>
);
}
export default CustomerDetail;
CustomerList componentinden CustomerDetail’ı referans olarak verip id değeri aşağıdaki gibi id ifadesiyle geçilir.
import React from 'react';
import CustomerDetail from './CustomerDetail';
function CustomerList(props)
{
const customers = [
{ id:1, name:'customer1'},
{ id:2, name:'customer2'},
{ id:3, name:'customer3'}];
return(
<div>
<ul>
{customers.map((t)=>
<div>
<li key={t.id}>{t.name}</li>
<CustomerDetail id={t.id}></CustomerDetail>
</div>)}
</ul>
</div>);
}
export default CustomerList;
Uygulamayı çalıştırdığımızda id değerlerinin taşınmış olduğunu görürüz.
Eğer burada function component değil, class component kullanış olsaydık render ifadesinin ve props ve customers ifaderinin başında this keyword’ünü eklememiz gerekecekti.
import React,{Component} from 'react';
class CustomerDetail extends Component
{
render(){
return(
<div>
<p><b>customer Id(CustomerDetail) :</b> {this.props.id}</p>
</div>
);
}
}
export default CustomerDetail;
States: State’ler props’lardan farklı olarak, aynı component içerisindeki taşınan değerlerdir. Bir diğer fark ise, state’ler kullanıldığı component içersinde değiştirilebilmesidir.
State’ler function componentlerde öncelikle kullanılmamaktaydı, fakat Hook’lar sayesinde kullanılmaya başlandı. (Bu konu daha sonra ele alınacaktır)
Class componentlerde state tanımı aşağıdaki şekilde yapılmaktadır. Burada her bir id öncesi state’de bulunan message yazacaktır.
import React,{Component} from 'react';
class CustomerDetail extends Component
{
state={ message :'Hello Customer' }
render(){
return(
<div>
<p>{this.state.message} <br/><b>customer Id(CustomerDetail) :</b> {this.props.id}</p>
</div>
);
}
}
export default CustomerDetail;
State’ler bulunduğu component içersinde değiştirilebilir. Bu setState ile yapılır, hangi state değiştirilecekse bunun içerisinde belirtilir.
import React,{Component} from 'react';
class CustomerDetail extends Component
{
state={ message :'Hello Customer' }
clickButton = () =>{
this.setState({message:'Message Change'});
}
render(){
return(
<div>
<p>{this.state.message} <br/><b>customer Id(CustomerDetail) :</b> {this.props.id}</p>
<button onClick={this.clickButton}>Change Message</button>
</div>
);
}
}
export default CustomerDetail;
State değişikliğini görmek için çalıştırıp butona tıkladığımızda ilgili state değeri Message Change olarak güncellenecektir.
Kısaca özetlemek gerekirse, state’ler bulunduğu component içersinde kullanılan değerlerdir ve değiştirilebilir, fakat props’lar farklı componentlerden değer alır ve kullanılan component içersinde değişirilmeyen ifadelerdir.
Bir sonraki yazımda component lifecycle’dan bahsederek devam edeceğim.
Bu konuyla ilgili sorularınızı alt kısımda bulunan yorumlar alanını kullanarak sorabilirsiniz.
Referanslar
TAGs:React – Props ve State’lerle çalışmal, react, react props ve state’ler
