# useState 例えば、パンくずリストのクリックした直前のリンクの色を変えたいとします。そういった場合、画面上でそ状態を保持しておいて、別のリンクをクリックした際には、状態を更新する必要があります。そういった状態のことを**state**といい、stateを扱うのに、`useState`という**フックス**を利用します。（**フックス**に関しては、後ほど説明します）使い方は、`useState()`という関数を呼び出すと、配列の形で、`[state, setState]`が返却されます。`state`は値で、`setState`はstateを更新する関数になります。呼び出し時に、`useState(1)`と引数を与えることで、`state`に初期値の`1`が格納されます。そして、setStateはstateを更新するので、`setState(5)`と呼び出すと、`state`は`5`になります。stateとsetStateの命名に関しては、基本的に`[名前, set名前]`とします。 ```tsx const [state, setState] = useState(1) // stateの初期値は1 setState(5) // stateが5になる ``` 上記を踏まえて、リンクをクリックした際に、その値をstateに保持するようにします。まずは、stateを定義します。state名は選択した値なので、`selectedValue`とします。このように命名はわかりやすいものにしましょう。値は文字列型を格納するので、初期値は`""（空文字）`としましょう。

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

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

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

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

...
          {items.map((item) => (
            <li key={item} className="breadcrumb-item">
              {item === selectedValue ? (
                <>{item}</>
              ) : (
                <a href="#" onClick={() => setSelectedValue(item)}>
                  {item}
                </a>
              )}
            </li>
          ))}
...

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