入力値を配列でstate管理したい

はじめに

業務中に学んだことをアウトプットするために簡単にまとめてみます。

入力欄

バリデーション

入力値を配列でstate管理できていることの確認

入力したデータが配列でstate管理できていることをconsole.log(data)で確認します

データ「10」を入力して送信ボタンをクリックするとuseStateの初期値である[]が取得できます

続けてデータ「20」を入力して送信ボタンをクリックすると前に送信した「10」を要素にもつ配列[10]が取得できます

以下略

やりかた

  const [data, setData] = useState<number[]>([]);
  const [newdata, setNewData] = useState("");

  const onChangeData = (e: ChangeEvent<HTMLInputElement>) => {
    setNewData(e.target.value);
    if (e.target.value === "") {
      setIsDataError(true);
    } else {
      setIsDataError(false);
    }
  };

  const onClickButton = () => {
    if (newData !== "") {
      setData([...data, Number(newData)]);
    }
    setNewData("");
    // console.log(data);
  };

  return (
    <>
      <VStack padding={8}>
        <Box w="50%" display="flex" alignItems="center" justifyContent="center">
          <FormControl isInvalid={isDataError}>
            <FormLabel>データ</FormLabel>
            <Input
              value={newData}
              onChange={(e) => onChangeData(e)}
              type="number"
            />

            {!isDataError ? (
              ""
            ) : (
              <FormErrorMessage>数字で入力してください</FormErrorMessage>
            )}
          </FormControl>
        </Box>

        <Button
          colorScheme="blue"
          mr={3}
          disabled={buttonValid()}
          onClick={() => onClickButton()}
        >
          送信
        </Button>
      </VStack>
    </>
  );

おわりに

reactでは基礎中の基礎だと思うので、しっかり教えられるように頭を整理しておきたいです。