[SOLVED] NextJS: how to call function from within JSX to close modal

Issue

This Content is from Stack Overflow. Question asked by FlameDra

I’m using the Tanstack React Query library to do a POST from a Modal which contains a form:

    const addDay = (day: TDay) => {
        const apiURL = process.env.NEXT_PUBLIC_SERVER_URL
        const queryURL = apiURL + router.asPath + '/days'

        console.log(queryURL)

        return axios.post<TDay>(queryURL, day, {
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*',
                Accept: 'application/json',
            },
        })
    }

    const { mutate, isSuccess, isLoading, isError, error } = useMutation(addDay)

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()

        mutate(day)
    }

In my return JSX, I would like to close the Modal when I click Submit and it isSuccess. I’m trying to do it as:

return (
        <div>
            <Modal open={props.open}>
                <Modal.Header>Add Trip</Modal.Header>
                <label onClick={props.onClose}>
                    ✕
                </label>
                <Modal.Body>
                    <div>
                        <form onSubmit={handleSubmit}>
                            <...form fields...>
                            <Modal.Actions>
                                <div>
                                    {isLoading ? (
                                        <Button>Adding</Button>
                                    ) : (
                                        <>
                                            {isError ? (
                                                <h2>
                                                    An error occurred:
                                                    {error instanceof Error ? error.message : 'Unknown error!'}
                                                </h2>
                                            ) : null}

                                            {isSuccess ? props.onClose : null}

                                            <Button>Submit</Button>
                                        </>
                                    )}
                                </div>
                            </Modal.Actions>
                        </form>
                    </div>
                </Modal.Body>
            </Modal>
        </div>
    )

The main issue is in the {isSuccess ? props.onClose : null} where even if isSuccess is true, it’s not calling props.onClose and closing the modal.

I know props.onClose works because I have an X button defined above as:

            <label onClick={props.onClose}>
                ✕
            </label>

And when I click it, it does close the modal.

How can I also call this function from within JSX so I can close the Modal when isSuccess is true?



Solution

The better way would be call on onSuccess.
According to there doc you can pass onSuccess function.

You can do something like this:

const onSuccess = (data) => {
  props.onClose()
}
const { mutate, isSuccess, isLoading, isError, error } = useMutation(addDay,{onSuccess})

doc reference: https://tanstack.com/query/v4/docs/reference/useMutation


This Question was asked in StackOverflow by FlameDra and Answered by Shubham Verma It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?