Halo teman – teman jumpa kembali di artikel tips dan trik dumetschool, kali ini kita akan mengenal State Class Component Atau Usestate Funtion Component. Dan juga kita akan membuat state di dalam class component dan fungsional component.

Kemudian muncul pertanyaan, apa sih perbedaanya..??

State biasanya kita dapat menggunakannya ketika kita mengextends class component react, seperti pada artikel sebelumya juga kita sudah membuat state pada react component. Misalnya seperti gambar di bawah ini

Maka hasilnya seperti di bawah ini

State merupakan bawaan dari class component pada react, jadi jika teman – teman membuat class component itu berarti teman – teman dapat menggunakan state untuk mengelola data. Namun state tidak berlaku pada funtion component, biasanya function component hanya menerima props (property) dari parent atau class component.

Oleh karena itu react menciptakan fitur terbaru yang bernama usestate atau biasa di sebut react hooks, secara fungsi sama dengan state pada class component. Namun usestate ini dapat kita buat pada function component, mari kita ubah class component menjadi funtion component

Kemudian kita akan membuat usestate, pertama kita import terlebih dahulu untuk usestate nya

Kemudian kita berikan value statenya

Untuk usestate sedikit berbeda dengan state biasanya, pada kotak berwarna merah saya memberikan default value data string, kemudian kita tampung pada const [data, setdata]

Pada const berisi array dengan 2 parameter, untuk parameter pertama merupakan state nya, dan di parameter ke 2 sebagai setStatenya. Untuk penamaan nya bebas terserah teman – teman. Namun yang perlu di ingat paarameter 1 adalah state parameter 2 adalah setStatenya. Jika kita menggunakan state class component nya biasanya kita sudah di sediakan fungsi setState untuk mengupdate isi data pada state. Kemudian pada useState kita membuatnya sendiri di parameter ke 2

Kita akan coba update data nya dengan menggunakan setdata yang sudah kita buat. Kita akan buat button untuk event click, ketika kita click kita akan jalankan setdata nya

Jika kita save dan click pada button maka state data akan berubah value nya

Bagaimana, sangat mudah bukan..??

Untuk script lengkap nya bisa di lihat di bawah ini

import React, { Component, useState } from 'react';

function App() {

  const [data, setdata] = useState('State dengan class component');

  return (
    <div className="App">
      <header className="App-header">
        <h1>{data}</h1>
        <button onClick={() => setdata("Data state akan kita ubah dengan event click")}>
          Click
        </button>
      </header>
    </div>
  );
}

export default App;


// class App extends Component{
//   state = {
//     data:"State dengan class component"
//   }
//   render(){
//     return(
//       <h1>{this.state.data}</h1>
//     )
//   }
// }

Tentu pada usestate ini teman – teman dapat memberikan value dengan berbagai type data, bisa teman – teman masukkan interger, string, bolean, array dan juga object.

Baik, sampai di sini dulu untuk pembahasan State Class Component Atau Usestate Funtion Component tentu kita akan jumpa kembali pada artikel berikutnya. Semoga bermanfaat, terimakasih dan sampai jumpa.