search

useState

例えば、パンくずリストのクリックした直前のリンクの色を変えたいとします。そういった場合、画面上でそ状態を保持しておいて、別のリンクをクリックした際には、状態を更新する必要があります。

そういった状態のことをstateといい、stateを扱うのに、useStateというフックスを利用します。

（フックスに関しては、後ほど説明します）

使い方は、useState()という関数を呼び出すと、配列の形で、[state, setState]が返却されます。stateは値で、setStateはstateを更新する関数になります。呼び出し時に、useState(1)と引数を与えることで、stateに初期値の1が格納されます。そして、setStateはstateを更新するので、setState(5)と呼び出すと、stateは5になります。stateとsetStateの命名に関しては、基本的に[名前, set名前]とします。

const [state, setState] = useState(1) // stateの初期値は1

setState(5) // stateが5になる

上記を踏まえて、リンクをクリックした際に、その値をstateに保持するようにします。まずは、stateを定義します。state名は選択した値なので、selectedValueとします。このように命名はわかりやすいものにしましょう。値は文字列型を格納するので、初期値は""（空文字）としましょう。

BreadCrumb.tsx◎
...
export const Breadcrumb = () => {
  const items = ["Home", "Library", "Date"];
  const [selectedValue, setSelectedValue] = useState("");
...

次にaタグのonClickイベントを修正します。ここで、setSelectedValueを呼び出して、itemにてstateを更新するようにします。これで各リンクをクリックした際に、selectedValueにHome, Library, Dateが格納されるようになりました。

BreadCrumb.tsx◎
...
          {items.map((item) => (
            <li key={item} className="breadcrumb-item">
                <a href="#" onClick={() => setSelectedValue(item)}>
                  {item}
                </a>
            </li>
          ))}
...

最後に、このselectedValueが対象のリンクの場合に、aタグを外すようにします。その場合は、3項演算子を使って以下のようにします。itemがselectedValueと同じ場合は、<>{item}</>と、それ以外は元々の形とします。

こちらをブラウザで確認すると、クリックした直前のリンクのみ色が変わることが確認できるかと思います。

PreviousonClickNextProps

Last updated