Передать реквизит от родительского к дочернему компоненту, который использует хуки?

Question

Я новичок, который изо всех сил пытается понять реакцию крюков.

У меня есть дочерний компонент "RadioButtonsGroup", который использует хуки (сборка из MUI):

function RadioButtonsGroup() {
  const [value, setValue] = React.useState('isAgent');

  function handleChange(event) {
    setValue(event.target.value);
  }

  return (
    <FormControl component="fieldset">
      <RadioGroup aria-label="Gender" name="gender1" value={value} onChange={handleChange}>
        <FormControlLabel
          value="isAgent"
          control={<Radio color="primary" />}
          label="Agent"
          labelPlacement="start"
        />
        <FormControlLabel
          value="isLandlord"
          control={<Radio color="primary" />}
          label="Landlord"
          labelPlacement="start"
        />
      </RadioGroup>
      <FormHelperText>labelPlacement start</FormHelperText>
    </FormControl>
  );
}

Как передать реквизиты в этот "RadioButtonsGroup.js" от его родителя?Я пытался использовать

<RadioButtonsGroup isAgent={false} />

Но похоже, что this.props.isAgent не передан потомку, а this.props вообще отсутствует.

Answer 1

Компонент функции не имеет своих реквизитов на this, но вместо этого props задается в качестве первого аргумента функции.

function RadioButtonsGroup(props) {
  const { isAgent } = props;

  // ...
}

Answer 2

props передается как -

function RadioButtonsGroup(props) {
}

или

const RadioButtonsGroup = props => {
}

export default RadioButtonsGroup;