Apa itu Props dan State?

Memahami Props dan State pada React Native, Jika Koders telah mempelajari React atau React Native Koders akan menemukan “props” dan “state” diseluruh kode yang dibuat. Jadi sebenarnya apa itu “props” dan “state” dan bagaimana cara menggunakannya?

Props dan State adalah dua jenis data yang mengontrol komponen.

Props

Props adalah kependekakan dari properties, aturan sederhananya adalah props tidak boleh dirubah, biasanya disebut “Immutable” atau “Unchangeable”

Props are Unchangeable — Immutable

Komponen menerima properties dari parent component nya dan tidak boleh dimodifikasi pada child component, pada React dan React Native alur data dalam satu arah dimulai dari parent component ke child component.

Koders dapat membuat komponen sendiri yang menggunakan properties, Komponen yang Koders buat nantinya dapat digunakan dimana saja layaknya komponen bawaan react native seperti View, Text, Image etc. Parent component yang memanggil child component (custome component) yang akan digunakan bisa mengatur properties, dapat berbeda pada setiap komponen.

  1. //Parent 
  2. export default class appkoder extends React.Component {
  3. 	render () {
  4. 	    return (
  5. 	     <View>
  6. 	     	 <TextKoder text={'Custom Text'}/>
  7. 	     </View>
  8. 	    )
  9. 	}
  10. }
  11.  
  12. // Child component
  13. export default class TextKoder extends React.Component {
  14. 	render () {
  15. 	    return (
  16. 	      <View>
  17. 	        <Text>{this.props.text}</Text>
  18. 	      </View>
  19. 	    )
  20. 	}
  21. }

Pada contoh diatas kita memiliki TextKoder komponen, yang me-render Text. Class appkoder sebagai parent komponennya memberikan properties “text” (line 6) kepada class TextKoder.

Komponen TextKoder diatas dapat dipanggil oleh parent class lainnya dengan memberikan properties “text” yang berbeda sehingga Koders dapat menggunakan komponen itu kembali tanpa harus membuat komponen baru pada setiap screen.

State

State bekerja secara berbeda jika dibandingkan dengan Props, State bersifat internal pada suatu komponen sementara Props diberikan untuk suatu komponen.

Berbeda juga dengan Props yang tidak boleh dirubah State dapat dirubah seiring dengan perubahan data.

State can Change — Mutable

Dalam React dan React Native State digunakan untuk melacak informasi, untuk merubah suatu state gunakan perintah this.setState jangan gunakan this.state, this.state digunakan untuk mendeklarasi state saat pertama kali komponen dijalankan.

Lalu kapan state dapat dipakai?

Disetiap ada perubahan data, Koders bisa menggunakan state.

Interaksi user dengan komponen adalah contoh penggunaannya, seperti mengklik button, mengisi form etc.

  1. class Form extends React.Component {
  2.  
  3.     constructor (props) {
  4.         super(props)
  5.         this.state = {
  6.         input: ''
  7.         }
  8.     }
  9.  
  10.     handleChangeInput = (text) => {
  11.       this.setState({ input: text })
  12.     }
  13.  
  14.     render () {
  15.       const { input } = this.state
  16.  
  17.       return (
  18. 	<View>
  19. 	  <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}
  20. 	    onChangeText={this.handleChangeInput}
  21. 	    value={input}
  22. 	  />
  23. 	</View>
  24.       )
  25.     }
  26. }

Pada contoh diatas Koders dapat melihat class Form yang memiliki satu state yaitu “input”, setiap kali user merubah komponen TextInput fungsi dari Props onChangeText akan mentrigger state untuk merubah value dari “input” state.

Setiap kali setState dipanggil akan mentrigger untuk merender ulang komponen, seperti komponen TextInput diatas yang awalnya memiliki value ‘’ (empty string) akan memiliki value sesuai apa yang Koders input.

Penjelasan

Props dapat kita gunakan untuk menambahkan fungsi atau nilai tertentu untuk child component yang akan digunakan sementara State dapat kita gunakan untuk metode penyimpanan data sementara sampai komponen dirender ulang.

Referensi

https://codeburst.io/props-and-state-in-react-native-explained-in-simple-english-8ea73b1d224e

Author

Started coding from 3rd junior high school, 3+ years of experience in Software development using any programming language.

Pin It