Blog

Belajar React Native - Passing Data antar Component

by
published on
Belajar React Native - Passing Data antar Component

Seringkali Component tidak berdiri sendiri.

Banyak kemungkinan kasus satu Component berinteraksi dengan Component lain.

Dilihat dari strukturnya, interaksi antar Component tadi bisa berasal dari:

  • Parent ke child.
  • Child ke parent.
  • Antar sibling (dalam hirarki yang sama).
  • Antar Layar

Untuk memberi kemampuan passing data antar Component, aplikasi React Native bisa menggunakan Redux.

Tapi penggunaan Redux untuk aplikasi yang dibangun sendiri justru terlalu merepotkan.

Oleh karena itu, saya akan menjelaskan cara passing data antar Component tanpa menggunakan Redux.

Sekarang, asumsikan kita memiliki sebuah aplikasi dengan struktur Component seperti ini:

.
+-- App
| +-- InputNama
| +-- ListNama
| | +-- Nama

Dari struktur tadi, diketahui bahwa App adalah root Component yang memiliki child InputNama dan ListNama.

Sedangkan ListNama memiliki child Nama.

Parent ke Child

Untuk mempassing data dari parent ke child, metode yang digunakan adalah dengan Props.

Jadi, apabila kita ingin mempassing data dari parent ke child, digunakan Props, yakni pada saat child diinstantiate.

Contohnya begini:

class App extends Component {
	render() {
		// saya mendefinisikan variable listNama di sini
		return (
			<View>
				<InputNama/>
				<ListNama listNamaDariParent={listNama}/>
			</View>
		);
	}
}

Child ke Parent

Untuk mempassing data dari child ke parent, metode yang digunakan adalah dengan callback.

Langkahnya:

Definisikan callback di parent dengan argument sesuai kebutuhan data yang dipassing.

Passing callback tadi ke child dengan Props.

Panggil callbacknya dari child.

Contohnya begini: 

// parent
class ListNama extends Component {
	callbackAnda = (dataDariChild) => {
		// kita menggunakan data dari child di sini.
	},
	render() {
		return (
			<View>
				<Nama callbackDariParent={this.callbackAnda}/>
			</View>
		);
	}
}
// child
class Nama extends Component{
	sebuahMethod = () => {
		// saya mendefinisikan sebuahValue di sini, kemudian memanggil callbacknya.
		this.props.callbackDariParent(sebuahValue);
	},
	render() {
		// lakukan render di sini.
	}
};

Antar Sibling

Untuk mempassing data antar sibling, harus ada sebuah parent untuk dijadikan perantara.

Pertama, passing data dari child ke parent melalui callback.

Selanjutnya, argument dari callback tadi dimasukkan ke state pada parent.

Selanjutnya, passing state tadi ke child melalui Props.

Misanya saya tambahkan Component bernama Alamat . Contohnya jadi begini:

class ListNama extends Component {
	callbackAnda = (dataDariChild) => {
		// kita menggunakan data dari child di sini.
		this.setState({dataDariChild: dataDariChild});
	},
	
	render() {
		return (
			<View>
				<Nama callbackDariParent={this.callbackAnda}/>
				<Alamat dataDariChild={this.state.dataDariChild}/>
			</View>
		);
	}
}
// child
class Nama extends Component{
	sebuahMethod = () => {
		// saya mendefinisikan sebuahValue di sini, kemudian memanggil callbacknya.
		this.props.callbackDariParent(sebuahValue);
	},
	render() {
		// lakukan render di sini.
	}
};
// child lain (sibling dari child di atas)
class Alamat extends Component{
	render() {
		const dataDariChild = this.props.dataDariChild;
		// lakukan render di sini.
	}
};

Selain contoh tadi, contoh passing data antar sibling sudah pernah dilakukan di subbab State.

Antar Layar

Untuk kasus ini, saya asumsikan bahwa kita menggunakan modul React Navigation.

Anda bisa cari sendiri untuk modul navigasi yang lain.

Untuk mempassing data antar layar, kita hanya perlu mempassing data saat kita memberi perintah navigate:

render() {
	const { navigate } = this.props.navigation;
	
	return (
		<View>
			<Button
			onPress={() => {
			navigate("Login", { user: "user", password: "password" });
			}}
			title="Pergi ke Login"
			color="#00ff00"
			/>
		</View>
	);
}

Untuk membaca bab-bab studi kasus tutorial ini, baca ebook "Javascript for Everything" ini.