Penggunaan State dalam React

Mari gunakan fungsi useState untuk membuat state yang mengandungi nama produk:

jsxconst state = useState('prod');

Hasilnya, pemalar state akan mewakili array, di mana elemen pertama akan menyimpan nama produk, dan yang kedua - fungsi untuk menukar nama:

jsxconst state   = useState('prod');
const name    = state[0];
const setName = state[1];

Untuk ringkasnya, biasanya pemalar perantaraan untuk array tidak digunakan, sebaliknya menggunakan destrukturisasi:

jsxconst [name, setName] = useState('prod');

Sekarang mari kita paparkan state dengan nama produk kita dalam beberapa markup:

jsxreturn <p>
  <span>{name}</span>
</p>;

Mari kumpulkan semuanya dan dapatkan kod berikut:

jsximport React, { useState } from 'react';

function App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
  </div>;
}

export default App;

Jika kod ini dijalankan, pada mulanya dalam div akan terpapar nilai awal state, dalam kes kita 'prod'. Apabila state ditukar melalui fungsi setName, nilai baru state akan muncul secara automatik dalam markup.