😄

ReactのuseStateで配列の複数プロパティを更新する

2021/10/24に公開

初投稿です。
WEBエンジニアに転職したく、Reactの学習を始めたので、OUTPUTとして投稿します。
(記事の書き方もよくわからない、、、、)

とりあえず投稿してみます!

useStateの複数プロパティの更新について

<やりたいこと>
・複数の入力欄を準備し、値を入力する。
・「更新」ボタンを押下すると、入力欄に入力していた値を下部のエリアにテキストとして表示する。
(TODOなどの機能にあるやつですね。。。)

以下のロジックを作成しました。
①入力欄の状態を管理するstate(newItem)と、今まで入力した内容を管理するstate(items)を作成
②入力欄のstate(newItem)は各inputタグのonChangeで設定する。
③「更新」ボタンのonClick処理で入力欄のstate(newItem)を、今までの入力内容を管理するstate(items)に設定する。

全体としてはこんな感じ↓
(inputタグのtypeが分からず、any型に、、、どなたか教えてください。。。。)

import "./styles.css";

import React, { useState } from "react";

type itemList = {
  title: string;
  content: string;
};

export default function App() {
  const [items, setItems] = useState<itemList[]>([]);

  const [newItem, setNewItem] = useState<itemList>({
    title: "",
    content: ""
  });

  const onChangeTitle = (e: any) => {
    setNewItem({ ...newItem, title: e.target.value });
  };

  const onChangeContent = (e: any) => {
    setNewItem({ ...newItem, content: e.target.value });
  };

  const onClickUpdate = () => {
    setItems((items) => [...items, newItem]);
    setNewItem({ ...newItem, title: "", content: "" });
  };

  return (
    <>
      <div>
        <span style={{ marginRight: "5px" }}>タイトル</span>
        <input value={newItem.title} onChange={onChangeTitle} />
      </div>
      <div>
        <span style={{ marginRight: "5px" }}>内容</span>
        <input value={newItem.content} onChange={onChangeContent} />
      </div>
      <button onClick={onClickUpdate}>更新!</button>
      {items.map((item: itemList) => (
        <div style={{ marginTop: "5px" }}>
          <div>
            <span style={{ marginRight: "5px" }}>タイトル</span>
            <span>{item.title}</span>
          </div>
          <div>
            <span style={{ marginRight: "5px" }}>内容</span>
            <span>{item.content}</span>
          </div>
        </div>
      ))}
    </>
  );
}

最後に

記事の書き方がよく分からず、わかりにくい記事になってしまいました。。。
Reactの勉強を始め、感じたことは三項演算子様様ということです。
(めっちゃ使うし、レガシーのSIerで仕事をしている僕にとっては新鮮この上ない!)
あと、ReactとTypeScriptの勉強を同時に始めましたが、型が難しいです、、、、(エラーがとまらん。)
少しずつ頑張っていこう。

Discussion