【React】予測候補が複数ある郵便番号からの住所入力補完コンポーネントの作成

{
	"message": null,
	"results": [
		{
			"address1": "北海道", "address2": "美唄市", "address3": "上美唄町協和",
			"kana1": "ﾎｯｶｲﾄﾞｳ", "kana2": "ﾋﾞﾊﾞｲｼ", "kana3": "ｶﾐﾋﾞﾊﾞｲﾁｮｳｷｮｳﾜ",
			"prefcode": "1",
			"zipcode": "0790177"
		},
		{
			"address1": "北海道", "address2": "美唄市", "address3": "上美唄町南",
			"kana1": "ﾎｯｶｲﾄﾞｳ", "kana2": "ﾋﾞﾊﾞｲｼ", "kana3": "ｶﾐﾋﾞﾊﾞｲﾁｮｳﾐﾅﾐ",
			"prefcode": "1",
			"zipcode": "0790177"
		},
		{
			"address1": "北海道", "address2": "美唄市", "address3": "上美唄町",
			"kana1": "ﾎｯｶｲﾄﾞｳ", "kana2": "ﾋﾞﾊﾞｲｼ", "kana3": "ｶﾐﾋﾞﾊﾞｲﾁｮｳ",
			"prefcode": "1",
			"zipcode": "0790177"
		}
	],
	"status": 200
}

import { getAddress } from "../pages/api/zipcode";

export const getCandidateAddresses = async (
  zipcode: string
): Promise<string[]> => {
  const res = await getAddress(zipcode);
  return res.data.results.map((item) => `${item.address1} ${item.address2} ${item.address3}`);
};

interface Props {
  zipcode: string;
  onChange: (code: string) => void;
  onSelectAddressBody: (addressBody: string) => void;
}

export function ZipCodeInput({
  zipcode,
  onChange,
  onSelectAddressBody,
}: Props) {
  const [tooltipContent, setTooltipContent] = useState<ReactNode>(undefined);
  const [focus, setFocus] = useState(false);
  const valid = isValidZipcode(zipcode)
  useEffect(() => {
    if (!valid) {
      setTooltipContent(undefined);
      return;
    }
    getCandidateAddresses(zipcode).then((candidates) => {
      if (candidates.length) {
        setTooltipContent(
          <List>
            {candidates.map((c) => (
              <ListItem key={c}>
                <ListItemButton onClick={() => onSelectAddressBody(c)}>{c}</ListItemButton>
              </ListItem>
            ))}
          </List>
        );
        return;
      }
      setTooltipContent(
        <List>
          <ListItem>存在しない郵便番号のようです</ListItem>
        </List>
      );
    });
  }, [onSelectAddressBody, valid, zipcode]);

  return (
    <div onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}>
      <Tooltip placement="right" open={valid && focus} title={tooltipContent}>
        <TextField
          label="郵便番号"
          value={zipcode}
          onChange={(e) => onChange(e.target.value)}
          error={!valid}
          helperText={
            valid ? "" : "7桁の正しい郵便番号の形式で入力してください"
          }
        />
        <TextField
          label="都道府県・市区町村"
          value={addressBody}
          onChange={(e) => setAddressBody(e.target.value)}
        />
      </Tooltip>
    </div>
  );
}

export default function Index(): ReactElement | null {
  const [zipcode, setZipcode] = useState("");
  const [addressBody, setAddressBody] = useState("");
  return (
    <PageBase title="予測候補が複数ある郵便番号からの住所入力補完">
      <ZipCodeInput
        zipcode={zipcode}
        onChange={setZipcode}
        onSelectAddressBody={setAddressBody}
      />
      <TextField
        label="都道府県・市区町村"
        value={addressBody}
        onChange={(e) => setAddressBody(e.target.value)}
      />
    </PageBase>
  );
}