Call parents function with arguments

Question

I have two file (parent and children). I would like that the children calls a function of the parents. No problem, I can do it. On the other hand, when I give arguments to the function, I can't get them from the parents...

Parent:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import AuthentificationService from "../../api/AuthentificationService"
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import ModalDelete from "../Modal/ModalDelete"
import SimplePopover from "./AddUser";

const useStyles = makeStyles(theme => ({
    root: {
        width: '100%',
        maxWidth: 360,
        backgroundColor: theme.palette.background.paper,
    },
}));

export default function CheckboxList(props) {
    const classes = useStyles();
    const [deleteIt, setDeleteIt] = React.useState(false);
    const [checked, setChecked] = React.useState([0]);
    const [id, setId] = React.useState(0);

    const handleToggle = value => () => {
        const currentIndex = checked.indexOf(value);
        const newChecked = [...checked];

        if (currentIndex === -1) {
            newChecked.push(value);
        } else {
            newChecked.splice(currentIndex, 1);
        }

        setChecked(newChecked);

        alert(value.email)
    };

    const confirmationDeleteUser = value => () => {
        setId(value.id);
        setDeleteIt(true);
    }


/// Here i would like to have my arguments value
    const setDeleteStateAndDelete = value => () => {
        console.log(value); // when i print the value it is empty
        setDeleteIt(false);
    }

    return (
            <div>
                <div>
                    {deleteIt === false ?  "" : <ModalDelete parentMethod={setDeleteStateAndDelete()} title="Suppresion utilisateur" message="Vous allez supprimer un utilisateur, êtes-vous sur ? "/>}
                </div>
            {props.response.map( test => {

                if (props.response.length <= 1) {

                } else {
                    return (
                        <div>
                            <List className={classes.root}>
                        <ListItem key={test} role={undefined} dense button onClick={handleToggle(test)}>
                            <ListItemText primary={`${test.email}`}/>
                            <ListItemSecondaryAction>
                                <IconButton edge="end" aria-label="delete" href="">
                                    <DeleteIcon onClick={confirmationDeleteUser(test)}/>
                                </IconButton>
                            </ListItemSecondaryAction>
                        </ListItem>
                            </List>
                        </div>
                    );
                }
            })}
        </div>
    );
}

my child component call the setDeleteStateAndDelete function with an argument but when i print this argument it is empty. Why ?

Child component:

import React, {Component} from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';


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

        this.state = {
            open: true,
            setOpen: true
        };

        this.handleClickOpen = this.handleClickOpen.bind(this);
        this.handleCloseDelete = this.handleCloseDelete.bind(this);
        this.handleClose = this.handleClose.bind(this);
    }

    handleClickOpen() {
        this.setState({
            setOpen: true,
            open: true
        });
    }

    handleCloseDelete() {
        this.props.parentMethod("test"); //here i put here as arguments
        this.setState({
            setOpen: false,
            open: false
        });
    }

    handleClose() {
        this.props.parentMethod("lol"); //here i put here as arguments
        this.setState({
            setOpen: false,
            open: false
        });
    }

    render() {
        return (
            <div>
                <Dialog
                    open={this.state.open}
                    onClose={this.handleClose}
                    aria-labelledby="alert-dialog-title"
                    aria-describedby="alert-dialog-description"
                >
                    <DialogTitle id="alert-dialog-title">{this.props.title}</DialogTitle>
                    <DialogContent>
                        <DialogContentText id="alert-dialog-description">
                            {this.props.message}
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.handleClose} color="primary" autoFocus>
                            Annuler
                        </Button>
                        <Button onClick={this.handleCloseDelete} color="primary" autoFocus>
                            Confimer
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        );
    }
}

export default ModalDelete;

why does it fit into the function but the argument is empty?

Answer 1

Pass the function name and not the return value

<ModalDelete parentMethod={setDeleteStateAndDelete()}  // <--- WRONG

As shown about you are actually calling the function right away by appending the paranthesis and thus passing the return value of the setDeleteStateAndDelete function and not the function itself.

<ModalDelete parentMethod={value => setDeleteStateAndDelete(value)()} // <--- RIGHT

Answer 2

You have to swap the parameters for the function like this:

const setDeleteStateAndDelete = () => value => {
    console.log(value); // when i print the value it is empty
    setDeleteIt(false);
}

The first paramerter will be called on the first call (here ()).

The second call will be passed to the value parameter. In your case, the value will be undefined, because you set value in the first call and its empty because you call setDeleteStateAndDelete(). The value from the second call will be ignored because the parameter call is empty(()).

Switch it and the value should be set from child component.

Since you are not currying the function with the Initial (), you could also remove the first brackets like this:

setDeleteStateAndDelete = value => {...}

and set it like this:

<ModalDelete parentMethod={setDeleteStateAndDelete} title="Suppresion utilisateur" message="Vous allez supprimer un utilisateur, êtes-vous sur ? "/>}

Hope This helps.