MUIのSelectコンポーネントでデータが多い場合はAutocompleteが最適

MUIのSelectコンポーネントとは
MUIのAutocompleteコンポーネントとは
まとめ

MUIのSelectコンポーネントとは

MUI (Material-UI) のSelectコンポーネントとは、Reactで使えるプルダウンメニューです。

Material Designに基づいたUIを提供し、アクセシビリティやカスタマイズ性にも優れています。

使い方は、@mui/material/Select から Select をインポートし、@mui/material/MenuItem から MenuItem をインポートして、HTMLの select と option タグのように使用するだけです。

TypeScriptを使用している場合は、@mui/material/Select からSelectChangeEventの型もインポートして使用します。

App.tsx

import { useState, useEffect } from 'react'
import Box from '@mui/material/Box'
import InputLabel from '@mui/material/InputLabel'
import MenuItem from '@mui/material/MenuItem'
import FormControl from '@mui/material/FormControl'
import Select, { SelectChangeEvent } from '@mui/material/Select'

type Products = {
  id: number
  title: string
  value: string
}

function App() {
  const [product, setProduct] = useState('')
  const [data, setData] = useState<Products[]>([])

  useEffect(() => {
    fetch('https://dummyjson.com/products')
      .then((response) => response.json())
      .then((json) => {
        const transformedData = json.products
          .map((product: Products) => ({
            id: product.id,
            title: product.title,
            value: String(product.id),
          }))
        setData(transformedData)
      })
      .catch((error) => console.error('Error', error))
  }, [])


  const handleChange = (event: SelectChangeEvent) => {
    setProduct(event.target.value as string)
  }

  return (
    <Box sx={{ maxWidth: 300 }}>
      <FormControl fullWidth>
        <InputLabel id="product-label">商品</InputLabel>
        <Select
          labelId="product-label"
          id="product"
          value={product}
          label="Product"
          onChange={handleChange}
        >
            {data.map((item) => (
              <MenuItem key={item.id} value={item.value}>
                {item.title}
              </MenuItem>
            ))}
        </Select>
        <hr />
        <Box>選択した商品のvalue値: {product}</Box>
      </FormControl>
    </Box>
  )
}

export default App

MUI Select コンポーネントのサンプル

MUIのAutocompleteコンポーネントとは

Autocompleteコンポーネントは、入力候補をサジェストするインターフェースを提供するコンポーネントです。

ユーザーがテキストを入力すると、それに応じた候補をリストアップし、そこから選択できるようにします。

HTMLで言うところの datalist に相当します。

HTML

<label for="country-select">Country: </label>
<input list="country" id="country-select" name="country-select" />
<datalist id="country">
  <option value="America">America</option>
  <option value="Australia">Australia</option>
  <option value="Canada">Canada</option>
  <option value="China">China</option>
  <option value="India">India</option>
  <option value="Japan">Japan</option>
  <option value="Russia">Russia</option>
</datalist>

Country:

AutoCompleteコンポーネントを使用するには、データが配列だけであれば、AutocompleteとTextFieldをインポートして以下のようにします。

App.tsx

import { useState, useEffect } from 'react'
import Box from '@mui/material/Box'
import FormControl from '@mui/material/FormControl'
import Autocomplete from '@mui/material/Autocomplete'
import TextField from '@mui/material/TextField'

type Product = {
  id: number
  title: string
  value: string
}

function App() {
  const [product, setProduct] = useState('')
  const [data, setData] = useState<Product[]>([])

  useEffect(() => {
    fetch('https://dummyjson.com/products')
      .then((response) => response.json())
      .then((json) => {
        const transformedData: Product[] = json.products
          .map((product: Product) => ({
            id: product.id,
            title: product.title,
            value: String(product.id)
          }))
        setData(transformedData)
      })
      .catch((error) => console.error('Error:', error))
  }, [])

  const handleChange = (_: React.SyntheticEvent, data: Product | null) => {
    setProduct(data ? data.value : '')
  }

  return (
    <Box sx={{ maxWidth: 300 }}>
      <FormControl fullWidth>
        <Autocomplete
          id="product-autocomplete"
          options={data}
          getOptionLabel={(option) => option.title}
          renderInput={(params) => (
            <TextField {...params} label="商品" />
          )}
          noOptionsText="該当の商品はありません"
          onChange={handleChange}
        />
      </FormControl>
      <hr />
      <Box>選択した商品のvalue値: {product}</Box>
    </Box>
  )
}

export default App