yoshikazu0110
@yoshikazu0110 (h y)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

react typescript 関数コンポーネントに引数を渡したい。

解決したいこと

react typescript 関数コンポーネントに引数を渡したいのですが、以下の場合引数の渡し方がよくわかりません。

#コンポーネント
#Select.tsx
export default function BasicSelect(title: string) {
  
  const [age, setAge] = React.useState('');
  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value as string);
  };

  return (
    <Box >
      <FormControl sx={{ width: '100%' }}>
        <InputLabel id="demo-simple-select-label">{title}</InputLabel>
        <Select
          labelId="user-label"
          id="user"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value={10}>yoshi1</MenuItem>
          <MenuItem value={20}>yoshi2</MenuItem>
          <MenuItem value={30}>yoshi3</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

下のような感じで引数を渡そうとしています。

import Select from './Components/Fields/Select'
function App() {
  return (
    <div className="App">
      <Select title='test'></Select>
    </div>
  );
}

慣れてなくて引数の渡し方に困っています。

0

1Answer

propsはobjectとして丸ごと渡されるので,直接利用するなら展開する必要があります.
型を付けるならpropsごと付ければOKです.

type PropsType = {
  title: string
}

function BasicSelect({title}: PropsType) {
  //...
1Like

Comments

  1. @yoshikazu0110

    Questioner

    ありがとうございます!
    コンポーネントに値渡すことできました!

Your answer might help someone💌