Reactでのステートの使用

関数 useState を利用して、 製品名を含むステートを作成しましょう:

jsxconst state = useState('prod');

結果として、定数 state は 配列を表し、その最初の要素には 製品名が格納され、 2番目の要素には名前を変更するための関数が格納されます:

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

簡潔にするため、通常は配列用の中間定数は使用せず、 分割代入を使用します:

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

では、製品名のステートを何らかのレイアウトに 表示してみましょう:

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

すべてをまとめると、次のコードが得られます:

jsximport React, { useState } from 'react';

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

export default App;

このコードを実行すると、最初は ステートの初期値がdivに表示されます。 この場合、'prod'です。 関数 setName を通じてステートが変更されると、 レイアウトには自動的に新しいステートの値が表示されます。