親コンポ―ネントで宣言したuseStateを子コンポーネントで更新する方法を知りたい

Question

前提

Reactを使ってフォーム機能を作ろうとしています。その中で、プルダウン機能の実装で苦戦中。

実現したいこと

親コンポーネントで宣言したuseStateの変数にプルダウンで選択した項目値を代入したい。
ただし、プルダウン機能は子コンポーネントで実装しています。

発生している問題・エラーメッセージ

親コンポーネントで宣言したuseStateを子コンポーネントにProp経由で渡しています。
抱えている問題としては、子コンポーネントで親コンポーネントから受け取ったuseStateの更新がうまくいかないことです。

該当のソースコード

import React, { useState } from 'react'
import FormControl from '@mui/material/FormControl';
import PullDown from './common/PullDown'

const Form = () => {
    const [category, setCategory] = useState("")

    return (
        <FormControl>
            <PullDown value={category} pulldown={setCategory}/>
        </FormControl>
    );
}

export default Form

import React from 'react';
import { useTheme } from '@mui/material/styles';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

const names = [
  'アクション',
  'ミステリー',
  'スポーツ',
  'ファンタジー',
  'ドラマ'
];

function getStyles(name, personName, theme) {
  return {
    fontWeight:
      personName.indexOf(name) === -1
        ? theme.typography.fontWeightRegular
        : theme.typography.fontWeightMedium,
  };
}

export default function MultipleSelect(prop) {
  const theme = useTheme();
  const [personName, setPersonName] = React.useState([]);

  const handleChange = (event) => {
    const {
      target: { value },
    } = event;
    console.log('setPersonName_before_value:',value)
    setPersonName(
      typeof value === 'string' ? value.split(',') : value,
    );
    console.log('value:',value)
    console.log('prop.pulldown_before:',prop.value)
    prop.pulldown(event)
    console.log('prop.pulldown_after:',prop.value)
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <InputLabel id="demo-multiple-name-label">カテゴリ</InputLabel>
        <Select
          labelId="demo-multiple-name-label"
          id="demo-multiple-name"
          multiple
          value={personName}
          onChange={handleChange}
          input={<OutlinedInput label="カテゴリ" />}
          MenuProps={MenuProps}
        >
          {names.map((name) => (
            <MenuItem
              key={name}
              value={name}
              style={getStyles(name, personName, theme)}
            >
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

試したこと

親コンポーネントから受け取ったuseStateの関数(pulldown)前後でログ出力を仕込んだ状態でブラウザからプルダウン項目の選択を実施。
コンソールを確認してみましたが、両方とも空文字のままであることは確認しています。

補足情報（FW/ツールのバージョンなど）

React 18.1.0
@mui/material 5.8.2

子コンポーネントの実装はMaterial-UI公式ドキュメントに載っているSelectコンポーネントを流用しています。

Answer 1

ぱっと見、MultipleSelect のstate personName が不要なのではと思えました。

以下のように修正でどうでしょう？

common/PullDown.jsx

import React from 'react';
import { useTheme } from '@mui/material/styles';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

const names = [
  'アクション',
  'ミステリー',
  'スポーツ',
  'ファンタジー',
  'ドラマ'
];

function getStyles(name, personName, theme) {
  return {
    fontWeight:
      personName.indexOf(name) === -1
        ? theme.typography.fontWeightRegular
        : theme.typography.fontWeightMedium,
  };
}

export default function MultipleSelect({ value, onSelect }) {
  const theme = useTheme();

  const handleChange = ({ target }) => {
    onSelect(target.value)
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <InputLabel id="demo-multiple-name-label">カテゴリ</InputLabel>
        <Select
          labelId="demo-multiple-name-label"
          id="demo-multiple-name"
          multiple
          value={value}
          onChange={handleChange}
          input={<OutlinedInput label="カテゴリ" />}
          MenuProps={MenuProps}
        >
          {names.map((name) => (
            <MenuItem
              key={name}
              value={name}
              style={getStyles(name, value, theme)}
            >
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

Form.jsx

import React, { useState } from 'react'
import FormControl from '@mui/material/FormControl';
import PullDown from './common/PullDown'

const Form = () => {
  const [categories, setCategories] = useState([])

  console.log(categories)

  return (
    <FormControl>
      <PullDown value={categories} onSelect={setCategories}/>
    </FormControl>
  );
}

export default Form

うまくいくと、Form に追加したログ console.log(categories) で、プルダウンの各項目を選択、あるいは非選択にするたびに、選択されている項目の配列が表示されます。

Comments

[yuki_20211108]

こんにちは。
コメントありがとうございます！

修正してくださったコードで動作を確認してみたところ、コメント通りの挙動になっていました。
こちらの希望としていた挙動になっているので、これで学習を進められますm(_ _)m

改めて、ご回答してくださりありがとうございました！