Call function from material ui fonction

Question

I want to pass a function as a props to my material ui function. The given function is undefined in my material ui fonction.

import React, { Component } from 'react';
import styled from 'styled-components';
import InputBase from '@material-ui/core/InputBase';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import SearchIcon from '@material-ui/icons/Search';
import Avatar from '@material-ui/core/Avatar';
import '../../css/App.css';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { withTranslation } from 'react-i18next';
import CreateNewGarden from './CreateNewGarden';



class Dashboard extends Component {
  constructor(props) {
    super(props);

    this.state = {

    };
    this.myFunction = this.myFunction.bind(this);
  }


  myFunction() {
   console.log("OK")
  }


  render() {
    return (
        <div>
          <CreateNewGarden myFunction={this.myFunction}/>
        </div>

    );
  }
}

const mapStateToProps = (state) => ({

});

Dashboard.propTypes = {

};

export default withTranslation()(withRouter(connect(mapStateToProps)(Dashboard)));

I send CreateNewGarden myFunction={this.myFunction} as a props and in my others file.

I have:

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Dialog from '@material-ui/core/Dialog';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import MuiDialogContent from '@material-ui/core/DialogContent';
import MuiDialogActions from '@material-ui/core/DialogActions';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Typography from '@material-ui/core/Typography';
import Slider from '@material-ui/core/Slider';
import { useTranslation } from 'react-i18next';
import measureLogo from '../../assets/images/measure.png';
import { Button } from '../../components';

const styles = (theme) => ({
  root: {
    margin: 0,
    padding: theme.spacing(2),
  },
  closeButton: {
    position: 'absolute',
    right: theme.spacing(1),
    top: theme.spacing(1),
    color: theme.palette.grey[500],
  }
});

const DialogTitle = withStyles(styles)((props) => {
  const {
    children, classes, onClose, ...other
  } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      {onClose ? (
        <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
});

const DialogContent = withStyles((theme) => ({
  root: {
    padding: theme.spacing(2)
  }
}))(MuiDialogContent);

const DialogActions = withStyles((theme) => ({
  root: {
    margin: 0,
    padding: theme.spacing(1)
  }
}))(MuiDialogActions);


export default function CustomizedDialogs(props) {
  const [open, setOpen] = React.useState(false);
  // eslint-disable-next-line no-unused-vars
  const [height, setHeight] = React.useState(0);
  // eslint-disable-next-line no-unused-vars
  const [width, setWidth] = React.useState(0);


  console.log("ici = " + props.myFunction)
  const setSizeHeight = () => (e, value) => {
    setHeight(value);
  };


  const setSizeWidth = () => (e, value) => {
    setWidth(value);
  };

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const { t } = useTranslation();

  return (
    <div className="marginCardComponent">
      <Button
        onClick={handleClickOpen}
        text="dashboard.createGardenBtn"
        type="submit"
      />
      <Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}>
        <DialogTitle id="customized-dialog-title" className="centerText" onClose={handleClose}>
          {t('dashboard.createGardenTitle')}
        </DialogTitle>
        <DialogContent className="logoMeasureParent">
          <img src={measureLogo} alt="Logo" className="logoMeasure centerText" />
        </DialogContent>
        <DialogContent dividers>
          <Typography className="centerText" gutterBottom>
            { t('dashboard.createGardenDetail') }
          </Typography>
        </DialogContent>
        <div className="marginLeft3">
          <p>{ t('dashboard.height') }</p>
        </div>
        <div className="centerSlider">
          <Slider
              /* eslint-disable-next-line react/destructuring-assignment */
            defaultValue={0}
            aria-labelledby="discrete-slider"
            valueLabelDisplay="auto"
            step={1}
            marks
            min={1}
            max={20}
            onChange={setSizeHeight()}
          />
        </div>
        <div className="marginLeft3">
          <p>{ t('dashboard.width') }</p>
        </div>
        <div className="centerSlider">
          <Slider
              /* eslint-disable-next-line react/destructuring-assignment */
            defaultValue={0}
            aria-labelledby="discrete-slider"
            valueLabelDisplay="auto"
            step={1}
            marks
            min={1}
            max={20}
            onChange={setSizeWidth()}
          />
        </div>
        <DialogActions>
          <Button
            onClick={handleClose}
            text="dashboard.cancelBtn"
            type="submit"
          />
          <Button
            onClick={props.myFunction}
            text="dashboard.createGardenBtn"
            type="submit"
          />
        </DialogActions>
      </Dialog>
    </div>
  );
}

When i click on the button it does nothing and when i print myFunction it tell me undefined.

Why i can't give a props to the function and call myFunction ?

Thank you for your help.

Answer 1

You need to call it outside of onClick. Do it like this:

const handleClick = (e) => {
   e.preventDefault()
   props.myFunction()
}

And in the button:

<Button
    onClick={handleClick}
    text="dashboard.createGardenBtn"
    type="submit"
 />

That will work. It just isnt letting you call it inside onClick

You can also just do this:

<Button
    onClick={() => props.myFunction()}
    text="dashboard.createGardenBtn"
    type="submit"
 />