State React

ReactJS

Komponen React memiliki objek state  bawaan.

Objek State adalah di mana kamu menyimpan nilai properti yang dimiliki komponen.

Ketika objek state berubah, komponen akan memberikan ulang.

Menciptakan Objek State

Objek State diinisialisasi di constructor:

Contoh:

Tentukan objek state dalam metode constructor:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

Objek State dapat memuat sebanyak sifat yang kamu suka:

Contoh:

Tentukan semua properti yang dibutuhkan komponen Anda:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

Menggunakan Objek State

Rujuk ke objek state di mana saja dalam komponen dengan menggunakan sintaks: this.state.propertyname

Contoh:

Rujuk ke objek state dalam metode render():

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
      </div>
    );
  }
}

Mengubah Objek State

Untuk mengubah keadaan nilai dalam objek, gunakan metode this.setState().

Ketika nilai dalam objek state berubah, komponen akan memberikan ulang, artinya output akan berubah sesuai dengan nilai yang baru.

Contoh:

Tambahkan tombol dengan onClick yang akan mengubah properti warna:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}