reactjs - How can I set a props value inside an onSubmit function?

Question

I have a React component that uses Formik for a form.

In the form, I have a button that fires an onSubmit to save the form data that looks like this:

<Button type="submit">UPDATE FORM</Button>

I also have a button that closes the form that looks like this:

<div id="hideForm"><button onClick={props.hide}> CLOSE FORM </button></div>

props.hide fires a function in the parent document to hide the form.

Both buttons are working, but I also want to have the form close when the UPDATE FORM button is clicked and after it updates the form data via AXIOS.

So inside the onsubmit, I set a props value called props.hide which hides the form.

I tried adding props.hide; at the very end of the onSubmit function, but it just gives me this error:

Failed to compile Line 98:25: Expected an assignment or function call and instead saw an expression no-unused-expressions

How can I also set props.hide inside the onSubmit function?

Thanks!

Here is the full code:

import { Formik, Field, Form, ErrorMessage } from 'formik';
import Button from 'react-bootstrap/Button';
import axios from 'axios';
import React, { useState, useCallback, useEffect } from "react";

const YourForm_Test = (props) => {

    return (
        <div id="hideForm"><button onClick={props.hide}> CLOSE FORM </button></div>
        <Formik
            initialValues={{ 
                id: props.idVal,
                title: props.titleVal,
                spreadsheetTypeId: String(props.typeIdVal),
                officeId: String(props.officeIdVal),
                countryId: String(props.countryIdVal,
                hide: props.hide)
             }}

                onSubmit={(values, { setSubmitting }) => {
                    axios({
                        method: "PUT",
                        url: "api/spreadsheets/" + values.id,
                        data: JSON.stringify(values),
                        headers: { 'Content-Type': 'application/json; charset=utf-8' }
                    });
                    alert("Spreadsheet Saved.");
                    props.hide;
                }}
         >
                <div id="portal_SpreadsheetDetails">
                    <div id="Details_Heading"></div>
                <div id="Details"><button> SHOW </button></div>
                    <form>
                        <label>
                            Title of Experiment
                        </label>
                        <Field id="title" type="text" name="title"/>

                        <label>
                            Types of Sources
                        </label>

                        <Field as="select" name="spreadsheetTypeId">
                            <option value="red">Red</option>
                            <option value="green">Green</option>
                            <option value="blue">Blue</option>
                        </Field>

                        <label>
                            Spreadsheet Description
                        </label>
                        <Field name="description" component="textarea" />

                        <label>
                            Email
                        </label>
                        <Field id="supervisorEmail" name="supervisorEmail" type="email"/>
                        <br />
                        <div>
                            <Button type="submit">
                                UPDATE FORM
                            </Button>
                        </div>
                    </form>
                </div>
            </Formik>
    );
};

export default YourForm_Test;

question from:https://stackoverflow.com/questions/65848109/how-can-i-set-a-props-value-inside-an-onsubmit-function

Answer 1

Waitting for answers