I want to pass functions in an array to a component in React. Whole code is below:

import React, { useEffect, useState } from 'react';
import Parse from 'parse/dist/parse.min.js';
import { useNavigate } from "react-router-dom";
import EntryHeader from '../Components/common/entryHeader/EntryHeader';
import Box from '@mui/material/Box';
import { Typography, Link, Container, Button } from '@mui/material';
import EntryPageInput from '../Components/EntryPageInput';
import ConfirmationBox from '../Components/ConfirmationBox';
const Signup = () => {
    let history = useNavigate();
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [password2, setPassword2] = useState('');
    const [isequal, setIsequal] = useState(false);
    const [openBox, setOpenBox] = useState(false);
    const notAccept = async function () {
        setOpenBox(false);
    }
    const doUserRegistration = async function () {
        const usernameValue = username;
        const passwordValue = password;
        const passwordValue2 = password2;
        if (passwordValue === passwordValue2) {
            try {
                const createdUser = await Parse.User.signUp(usernameValue, passwordValue);
                alert(
                    `Success! User ${createdUser.getUsername()} was successfully created!`
                );
                //const currentUser = await Parse.User.current();
                createdUser.set("level", "admin");
                await createdUser.save();
                setOpenBox(false);
                history("/addCompanyInfo");
                return true;
            } catch (error) {
                setOpenBox(false);
                alert(`Error! ${error}`);
                return false;
            }
        }
        else{
            alert('password is not matching!');
            window.location.reload();
        }
    };
    useEffect(()=>{
        (password === password2 && password !== "") ? setIsequal(true) : setIsequal(false);
    }, [password2]);

    return (
        <Container
            maxWidth={false}
            sx={{
                marginTop: '100px',
                maxWidth: '400px'
            }}>
            <Box sx={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                rowGap: 2,
            }}>
                <EntryHeader />
                <Typography component="h1" variant="h5"> Kullanıcı Kayıt </Typography>
                <Box sx={{ width: '400px' }}>
                    <EntryPageInput label='Username' onChange={(event) => setUsername(event.target.value)} />
                    <EntryPageInput label='Password' onChange={(event) => setPassword(event.target.value)} type='password' />
                    <EntryPageInput label='Re-type password' onChange={(event) => setPassword2(event.target.value)} color = {isequal ? "success" : "warning"} helperText = {isequal ? "matching" : "not matching"} type='password' />
                </Box>
                <Button
                    variant='contained'
                    onClick={() => setOpenBox(true)}
                    sx={{
                        width: '200px'
                    }}
                >
                    Sign Up
                </Button>
                {/* <SocialLogin></SocialLogin> */}
                <Typography component="h6" variant="h6">Already have an account?<Link href="/login">Log in</Link> </Typography>
                <ConfirmationBox  
                    funcList=[doUserRegistration(),notAccept()]
                    //accept={() => doUserRegistration()} notAccept={() => notAccept()} openBox={openBox} 
                    title={"Kayıt olmak istediğine emin misin ?"} 
                    context={"Kabul etmen durumunda deneme sürümü ve paketler konusunda sizinle iletişime geçeceğiz."}
                />
            </Box>
        </Container>
    );
};

export default Signup;

In the code above, we want to pass doUserRegistration and notAccept functions in array such that funcList=[doUserRegistration(),notAccept()] to component ConfirmationBox. I tried like funcList=[doUserRegistration(),notAccept()]. It doesn't work. I couldn't find such example. Is it possible, and if it is, how? I also add specific part of code below.

Functions:

 const notAccept = async function () {
        setOpenBox(false);
    }
    const doUserRegistration = async function () {
        const usernameValue = username;
        const passwordValue = password;
        const passwordValue2 = password2;
        if (passwordValue === passwordValue2) {
            try {
                const createdUser = await Parse.User.signUp(usernameValue, passwordValue);
                alert(
                    `Success! User ${createdUser.getUsername()} was successfully created!`
                );
                //const currentUser = await Parse.User.current();
                createdUser.set("level", "admin");
                await createdUser.save();
                setOpenBox(false);
                history("/addCompanyInfo");
                return true;
            } catch (error) {
                setOpenBox(false);
                alert(`Error! ${error}`);
                return false;
            }
        }
        else{
            alert('password is not matching!');
            window.location.reload();
        }
    };

Component that we want to pass array :

 <ConfirmationBox  
                    funcList=[doUserRegistration(),notAccept()]
                    //accept={() => doUserRegistration()} notAccept={() => notAccept()} openBox={openBox} 
                    title={"Kayıt olmak istediğine emin misin ?"} 
                    context={"Kabul etmen durumunda deneme sürümü ve paketler konusunda sizinle iletişime geçeceğiz."}
                />

CodePudding user response：

You are calling the functions and passing them, that will pass the results of that function which is not what you want. Pass the functions instead

<ConfirmationBox  
                    funcList={[doUserRegistration,notAccept]}
                    //accept={() => doUserRegistration()} notAccept={() => notAccept()} openBox={openBox} 
                    title={"Kayıt olmak istediğine emin misin ?"} 
                    context={"Kabul etmen durumunda deneme sürümü ve paketler konusunda sizinle iletişime geçeceğiz."}
                />