08. REACT NATIVE - STATE

State merupakan data private dari sebuah komponen. Data ini hanya
tersedia untuk komponen tersebut dan tidak bisa di akses dari
komponen lain. Komponen merubah nilai state-nya sendiri. Berikut
adalah contoh implementasi dari state :

Dalam contoh berikut dijelaskan pembuatan state pada,
a) Functional komponen.
b) Class komponen

State dengan Functional Komponen

import React, { useState, Component } from "react";
import { View, Text, Button, StyleSheet } from "react-native";
const App = () => {
  return (
    <View style={{ padding: 10 }}>
      <Text style={{ alignItems: "center", padding: 10 }}> Komponen Dinamis dengan State </Text>
      <Counter />
    </View>
  );
};
const Counter = () => {
  const [number, setNumber] = useState(0);
  return (
    <View>
      <Text style={{ textAlign: "center", padding: 15 }}>{number}</Text>
      <View style={{ flexDirection: "row" }}>
        <View style={{ marginRight: 5, flex: 1 }}>
          <Button title="Tambah" onPress={() => setNumber(number + 1)} />
        </View>
        <View style={{ marginRight: 5, flex: 1 }}>
          <Button title="Kurang" onPress={() => setNumber(number - 1)} />
        </View>
      </View>
    </View>
  );
};
export default App;

Output :

*State dengan Class Komponen
*

import React, { useState, Component } from "react";
import { View, Text, Button, StyleSheet } from "react-native";
const App = () => {
  return (
    <View style={{ padding: 10 }}>
      <Text style={{ alignItems: "center", padding: 10 }}> Class - Komponen Dinamis dengan State </Text>
      <CounterClass />
    </View>
  );
};
class CounterClass extends Component {
  state = {
    number: 0,
  };
  render() {
    return (
      <View>
        <Text style={{ textAlign: "center", padding: 15 }}>{this.state.number}</Text>
        <View style={{ flexDirection: "row" }}>
          <View style={{ marginRight: 5, flex: 1 }}>
            <Button title="Tambah" onPress={() => this.setState({ number: this.state.number + 1 })} />
          </View>
          <View style={{ marginRight: 5, flex: 1 }}>
            <Button title="Kurang" onPress={() => this.setState({ number: this.state.number - 1 })} />
          </View>
        </View>
      </View>
    );
  }
}
export default App;

Output :

Berikut penjelasan umum dari State :
a) Inisialiasi State
Pada beberapa contoh inisialisasi di buat dengan menggunakan constructor(). Tapi saya lebih memilih style ini. karena lebih simple

b) Update State
Untuk merubah state gunakan perintah this.setState(). Ketika state berubah secara otomatis component akan di render ulang. method disini menggunakan arrow function untuk menghindari problem javascript bind.

c) Read Component State
Untuk membaca state gunakan perintah this.state.keyName

d) Call Method
Semua perubahan state dilakukan di dalam method render()