CODEWITHSUNDEEP
reactjsreact-hooks
polina_snova
polina_snova

Reputation: 25

Pass props from parent to child component that uses hooks?

I am a beginner who straggles to understand react hooks.

I have child component "RadioButtonsGroup" that uses hooks (build by 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>
  );
}

How do I pass props to this "RadioButtonsGroup.js" from it's parent? I tried to use 

<RadioButtonsGroup isAgent={false} />

But seems like there is not this.props.isAgent passed to child and there is not this.props at all.

Upvotes: 2

Views: 3996

Answers (2)

A G
A G

Reputation: 22569

props are passed like -

function RadioButtonsGroup(props) {
}

or

const RadioButtonsGroup = props => {
}

export default RadioButtonsGroup;

Upvotes: 2

Tholle
Tholle

Reputation: 112777

A function component doesn't have its props on this, but instead the props are given as first argument to the function.

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

  // ...
}

Upvotes: 6

Related Questions