Belajar React Native – State

Berjumpa lagi dalam seri Belajar React Native bersama daengweb.id. Ada dua jenis data yang mengontrol sebuah component, diantaranya adalah props dan state. Pada artikel sebelumnya kita telah membahas mengenai props, maka kali ini kita akan fokus memahami dan mengenali cara kerja state. Singkatnya jika props sifatnya tetap atau tidak dapat berubah-ubah, maka state sebaliknya yakni dapat diperbaharui. So, jika data yang akan diproses kemungkinan terdapat perubahan, maka gunakan state.

Bekerja dengan State

Seharusnya kita menginisialisasi state di constructor, kemudian memanggil setState ketika kita ingin melakukan perubahan data. Penerapan yang akan kita lakukan kali ini adalah menampilkan state dengan text aku sedang belajar state.

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

class belajarState extends Component {
  constructor(props) {
      super(props)
      this.state = {
        myState: 'aku sedang belajar state'
      };
  }
  updateState = () => this.setState({ myState: 'ini adalah state yang baru' })

  render() {
    return (
      <View>
        <Text onPress = {this.updateState}>
          {this.state.myState}
        </Text>
      </View>
    );
  }
}

export default belajarState
AppRegistry.registerComponent('daengweb', () => belajarState);

Kemudian dengan menggunakan event onPress maka saat text tersebut diklik function updateState akan dipanggil dimana value state akan di update menjadi ini adalah state yang baru.

Pada contoh yang lain dengan menggabungkan TextInput, jadi value dari state yang ditampilkan sesuai data yang di input pada TextInput. Modifikasi kode diatas menjadi seperti berikut ini :

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

class belajarState extends Component {
  constructor(props) {
      super(props)
      this.state = {
        myState: ''
      };
  }

  render() {
    return (
      <View>
        <TextInput onChangeText={(text) => {this.setState({myState:text})}} />
        <Text>Saya sedang belajar {this.state.myState}</Text>
      </View>
    );
  }
}

export default belajarState
AppRegistry.registerComponent('daengweb', () => belajarState);

Kira-kira seperti itulah cara kerja dari state, silahkan diexplore lebih lanjut dan perbanyak sample dalam menggunakannya. Dan apabila berkenaan untuk mengirim ke kami samplenya, maka akan kami tampilkan di tutorial ini. Semoga bermanfaat.