Tutorial Belajar React Native – Understanding Props and State | React Native

React Native – Understanding Props and State

Selain Component dan JSX, dalam React Native anda juga akan sangat sering menemui Props dan State. Apa itu Props dan State?

Props

Dalam pengembangan aplikasi kita mungkin sering menggunakan parameter pada suatu fungsi. atau class. React native sendiri menyediakan sebuah opsi untuk mempermudah developer mengelola parameter pada suatu component yang disebut Props. Props sendiri bisa dibilang adalah sebuah parameter default yang dimiliki oleh suatu component dimana ketika anda memanggil sebuah component, anda dapat menentukan/insert nilai props untuk component tersebut. Sebagai contoh penggunaan props adalah seperti berikut :

//class ini akan menampilkan jumlah huruf yang ada pada
//suatu karakter.

class CountOfCharacter extends Component {
 constructor(props) {
   super(props);
 }

 render() {
   return (
       <Text style={styles.welcome}>
         //menampilkan jumlah huruf dari variabel props.text
         Count of character : {this.props.text.length}
       </Text>
   );
 }
}

Silahkan hapus baris komentar yang berawalan “//“.

Code di atas adalah salah satu contoh penggunaan props pada suatu component. Kita dapat memanggil class di atas dengan cara seperti berikut :

       <CountOfCharacter text=‘Text Saya' />

Pemanggilan tag tersebut akan mencetak tampilan “Count of character : 9”

Props digunakan untuk melempar parameter yang berasal dari luar class component/dari component yang memanggilnya. Props juga tidak mengizinkan modifikasi nilai props di dalam class component-nya dan pada teorinya penggunaan parameter memang tidak dirancang untuk dimanipulasi/diubah-ubah. Bagaimana jika alur aplikasi kita memerlukan data props untuk dimodifikasi? Anda dapat gunakan variabel lain atau gunakan “state”. Lalu bagaimana jika saya butuh variabel untuk mengelola informasi dalam suatu component? Anda juga dapat gunakan variabel lain atau gunakan “state”.

State

State bisa dibilang adalah variabel default yang dimiliki suatu component yang nilainya dapat diubah-ubah. Nilai pada state harus didefinisikan terlebih dahulu pada constructor suatu component. Berikut contoh penggunaan state:

Jika pada pemrograman C# atau Java sering ditemui pendefinisian variabel seperti berikut :

private string name;
private string address;

Pada react native mendefinisikan nilai tersebut di dalam state dengan cara seperti berikut :

constructor(props) {
   super(props);
   this.state = { name: ‘Sabit',address:'South Sumatera, Indonesia’ };
 }

Dengan ditanamkannya nilai this.state.name dan this.state.address, anda dapat menggunakan variabel tersebut di seluruh class component bersangkutan. Anda juga dapat merubah nilai dari state dengan cara seperti berikut :

this.setState({name:new_value}) // code ini akan merubah nilai this.state.name
this.setState({address:new_value}) // gunakan code ini untuk merubah this.state.address

Berikut adalah contoh aplikasi lengkap penggunaan state dan props :

import React, { Component } from 'react';
import {
 AppRegistry, StyleSheet, Text, TextInput, View
} from 'react-native';

export default class myfirstApp extends Component {
 constructor(props) {
   super(props);
   this.state = { text: '',text2:'Awesome' };
 }

 render() {
   let judul='React Native';
   return (
     <View style={styles.container}>
       <Text style={styles.welcome}>
         Welcome to {judul} {this.state.text2}!
       </Text>
       <TextInput
         style={{height: 40, margin: 15, padding: 10,
           borderColor: 'gray', borderWidth: 1}}
         onChangeText={(text) => this.setState({text})}
       />
       <CountOfCharacter text={this.state.text} />
     </View>
   );
 }
}

//class ini akan menampilkan jumlah huruf yang ada pada
//suatu karakter
class CountOfCharacter extends Component {
 constructor(props) {
   super(props);
 }

 render() {
   return (
         //akan menampilkan jumlah huruf dari variabel props.text
       <Text style={styles.welcome}>
         Count of character : {this.props.text.length}
       </Text>
   );
 }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 },
 welcome: {
   fontSize: 20,
   textAlign: 'center',
   margin: 10,
 },
 instructions: {
   textAlign: 'center',
   color: '#333333',
   marginBottom: 5,
 },
});

AppRegistry.registerComponent('myfirstApp', () => myfirstApp);

Itu adalah contoh aplikasi untuk melakukan penghitungan huruf yang telah diinput. Tampilan dari aplikasi adalah sebagai berikut :

Jika code anda sudah benar, maka akan tampil screen seperti gambar diatas.. Happy coding