Reactでのステートの使用

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

const state = useState('prod');

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

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

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

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

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

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

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

import React, { useState } from 'react';

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

export default App;

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

画面上にユーザーデータを表示したいとします: 名前、姓、年齢。これを行うために、初期値を持つ適切なステートを作成してください。