Reactjs Material: How to pass to props to reactjs material dialog

Question

How to pass props to reactjs material dialog? if I do < FormDialog value={this.prop.value} />, throwing Type '{ value: any; }' is not assignable to type 'IntrinsicAttributes' error. How i can assign type for FormDialog() or any other way to pass props to that component?

Modal.tsx

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);

  function handleClickOpen() {
    setOpen(true);
  }

  function handleClose() {
    setOpen(false);
  }

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
        <DialogContent>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Email Address"
            type="email"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Subscribe
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Card.tsx

class ShipmentCard extends Component<ShipmentCardProps, ShipmentCardState> {
  render() {
    return (
      <Card className="Card">
        <CardContent className="Card-Content">
        <FormDialog />
          <Grid container spacing={3}>
            <h3 className="Card-Content__Title">{this.props.value.name}</h3>
            <FormDialog  />{/*how i can pass this.props.value  */}
          </Grid>
        </CardContent>
      </Card>
    );
  }
}

Wouldn’t you need to define the component as taking props? — Dave Newton, Aug 06 '19 at 12:39
@Dave, I tried `FormDialog` as component but it doesnt work. Do u know any better way to implement this ? — SKL, Aug 06 '19 at 12:49

CrossTheDev · Answer 1 · 2019-08-06T12:58:17.433

1

Your function component has no declared props. You can do it like this:

export default function FormDialog(props: { value: string }) {
   ...
}

Of course it is better to write an interface FormDialogProps and do props: FormDialogProps for multiple props and reusability.

Then you can do:

<FormDialog value="string" />
<FormDialog value={'string'} />
<FormDialog value={variable} />

edited Aug 06 '19 at 12:58

answered Aug 06 '19 at 12:52

CrossTheDev

151
1
11

How I can use that value in html from `FormDialog`? i'm getting `Invalid prop children` – SKL Aug 06 '19 at 13:04
You can use it as `{props.value}` in JSX code, as `props.value` in JavaScript code. Prop `children` is another prop you have to declare if you want to use it. Usually it is typed as `children: React.ReactNode`. `children` prop is anything you put between tags of the component: `this is a children string`. – CrossTheDev Aug 06 '19 at 13:09
You can find it all in documentation https://reactjs.org/docs/components-and-props.html https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx and so on. – CrossTheDev Aug 06 '19 at 13:14
noted that. im getting error when I pass like this ``. If I pass string working good – SKL Aug 06 '19 at 13:17

Reactjs Material: How to pass to props to reactjs material dialog

1 Answers1