Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips dan trik seputar dunia website, pada kesempatan kali ini kita akan belajar Mengenal State Pada ReactJS apakah state itu..??

State di dalam reactjs adalah sebuah property, dan state ini biasanya berada di dalam component tidak bisa keluar dari component tetapi dengan bantuan property props component 1 dan component 2 bisa saling berhubungan asalkan setiap nilai yang di gunakan di dalam component harus selalu sama. Pada artikel kali ini kita hanya akan membahas state pada reactjs. Pertama – tama kita deklarasikan state yang mau kita set, kali ini kita akan mengisi data dalam state yaitu tentang profil. Perlu diingat data di dalam state wajib berbentuk object, atau bisa lihat pada script di bawah ini

constructor() {
    super();
    this.state = { nama: 'Hernowo',alamat:'Grenvile',usia:23 }
  }

Nah untuk mengambil data nya tinggal kita panggil key nya, dengan begitu value akan otomatis tampil sesuai key nya. Ketikkan script di bawah ini untuk menampilkannya

render() {
    return (
      <div>
        <h1>Hello Dumet School</h1>
        <p>Halo nama saya <b>{this.state.nama}</b>, alamat rumah saya di daerah <b>{this.state.alamat}</b> dan usia saya <b>{this.state.usia}</b></p>
      </div>
    );
  }

Jika sudah run pada browsernya, maka akan tampil seperti gambar di bawah ini

Untuk script lengkapnya bisa lihat di bawah ini

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();
    this.state = { nama: 'Hernowo',alamat:'Grenvile',usia:23 }
  }

  render() {
    return (
      <div>
        <h1>Hello Dumet School</h1>
        <p>Halo nama saya <b>{this.state.nama}</b>, alamat rumah saya di daerah <b>{this.state.alamat}</b> dan usia saya <b>{this.state.usia}</b></p>
      </div>
    );
  }
}

export default App;

Nah itulah cara penggunaan state reactjs dengan contoh sederhana, pada artikel selanjutnya kita akan lanjutkan membahas tentang props. Kemudian kita buat sebuah list data kemudian kita akan looping untuk kita tampilkan pada browser. Baik, sekian pada artikel kali ini tentang Mengenal State Pada ReactJS kita jumpa kembali pada pertemuan selanjutnya. Terimakasih dan sampai jumpa, semoga bermanfaat.