react-select の試し書き。（不要になったのでgistに保存

select.tsx

import { useState, useEffect, useCallback, useMemo } from 'react'
import { useRouter } from 'next/router'

import {
  Box,
  Heading,
  FormErrorMessage,
  FormLabel,
  FormControl,
  FormHelperText,
  Input,
  Button,
  UnorderedList,
  ListItem
} from "@chakra-ui/react";
import { useForm } from "react-hook-form";

import Link from '../../src/components/Link'
import { Layout } from "../../src/components/layouts"

// const skillsData = dynamic(() => import('../../src/constants/skills'))
// const cardsData = await import("../../src/constants/cards")
// const skillsData = await import("../../src/constants/skills")

import { AllCardsData } from '../../src/constants/cards'
import { AllSkillsData } from '../../src/constants/skills'
import { CardDataType, SkillDataType } from '../../src/types/CardDataType';

import { gouseiMaterialData, GouseiMaterialDataType } from '../../src/constants/gouseiMaterialData'

import
{ ActionMeta } from 'react-select';

import {
  Select,
  
} from "chakra-react-select";

const createOptionData = gouseiMaterialData.map((datum) => {
    return {
      // value: "",
      label: datum.name
    }
  })

const Page: React.VFC = () => {
  const router = useRouter()
  
  // const qs = router.query?.q as string
  // console.log('qs', qs)
  // const removeSuffix = /LV?.*\n?/i
  // const url2qs = decodeURIComponent(qs)
  // const parsedQs = !url2qs ? "" : url2qs.replace(removeSuffix, "")
  // const initData = createOptionData.find(datum => datum.label === parsedQs) || ""
  
  const [value, setValue] = useState("");
  const [defaultValue, setDefaultValue] = useState<{label: string}>()

  // useEffect(() => {
  //   const qs = router.query?.q as string
  //   console.log('query', router.query)
  // console.log('qs', qs)
  // const removeSuffix = /LV?.*\n?/i
  //   const url2qs = decodeURIComponent(qs)
  //   const parsedQs = !url2qs ? "" : url2qs.replace(removeSuffix, "")
  //   const findData = createOptionData.find(datum => datum.label === parsedQs)
  //   if (findData) {
  //     setDefaultValue(findData)
  //     setValue(findData.label)
  //   }
    
  // },[])

  const optionData = useMemo(() => createOptionData, [])

  const onChange = useCallback((newValue: unknown, _actionMeta: ActionMeta<unknown>) => {
    if (!newValue) return;
    const selectData = newValue as {
      // value: string;
      label: string;
    }
    setValue(prevState => selectData.label)
  }, [])


  const filterOptions = (
  candidate: { label: string; data: any },
  input: string
  ) => {
    if (/[a-z]{1}|\d{1}/i.test(input)) return;

    const removed = (val: string) => val.replace(/ |　/g, '')
    if (input) {
      return candidate.data.__isNew__ || removed(candidate.label).includes(removed(input));
    }
    return true;
};

  return (
    <Layout>
      <Box>
        {/* <a href={url} download="hoge.json">hoghoge</a> */}
        <FormControl id="email">
          <FormLabel>スキル名</FormLabel>
          <Select
              placeholder=""
              autoFocus={true}
              isSearchable={true}
              isClearable={true}
              isInvalid={false}
              isDisabled={false}
              isLoading={false}
              isRtl={false}
              defaultValue={defaultValue}
              options={optionData}
              onChange={onChange}
              filterOption={filterOptions}
            />
          <FormHelperText>We'll never share your email.</FormHelperText>
        </FormControl>
        <Button mt={4} w="full" colorScheme="teal" type="button">
          検索する
        </Button>
      </Box>
      <Box>
        <pre>{JSON.stringify(value)}</pre>
      </Box>
    </Layout>
  )
}

export default Page