React Native

Belajar React Native – State

Belajar React Native – State

1721 Dilihat

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.

Backend Developer iTechShark, salah satu perusahaan asal Amerika. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Fitur Authentication React Native React Native

Fitur Authentication React Native

Apa jadinya apabila informasi yang bersifat pribadi dapat diakses secara publik yang bukan merupakan pemilik informasi tersebut? Maka dalam kondisi seperti ini, fitur authentication akan sangat dibutu...

Membuat Aplikasi Chatting React Native React Native

Membuat Aplikasi Chatting React Native

Pada case kali ini kita akan berinteraksi dengan database menggunakan Firebase dengan contoh kasus yakni membuat aplikasi chatting yang kita beri nama Whatsapp Clone.

React Native Navigation React Native

React Native Navigation

Salah satu hal yang penting untuk diketahui dalam membangun sebuah aplikasi mobile adalah navigasi, sebab dengan navigasi kita bisa berinteraksi antar satu component dengan component lainnya atau anta...

Komentar