React not resetting form values when user opens a new form

Question

I have some interesting behaviour that I'm trying to understand in my React Application below. I'm finding form values aren't resetting when a user starts a new form submission and I'm trying to understand why.

We have a Dashboard component, which had a button allowing users to create a new project.

The button is below:

     <HrefLink
         to={"/project/new"}
         state={{ projects: rows }}
     >
         <Button id="newProject" variant="contained" size="Small">
             New
         </Button>
    </HrefLink>

Fairly simple stuff. Under the NewProject route, we import defaultValues for new projects via a constants file:

    import { defaultValues } from "../constants/consts";

    export default function NewProject() {
        const [formValues, setFormValues] = useState(defaultValues);
        ...
        ...
    }

consts.jsx:

    export const defaultValues = {
        name: "",
        description: "",
        startDate: new Date(new Date().setHours(0, 0, 0, 0)),
        endDate: "",
        status: "DRAFT"
    }

Again, fairly simple. However, I'm finding what's happening is I can start a new form, go through the steps, enter values, etc (I am running on localhost). Then, without submitting the form - I just click back home instead, I can come back to my application the next day, and I find when I start a new form again, the startDate is being set as the previous day instead of today's date. I.E: a new form is not being set with the default values.

Just this morning I can see: formValues.startDate: Tue Nov 21 2023 00:00:00 GMT+1300 (New Zealand Daylight Time)

Todays actual date if using new Date(new Date().setHours(0, 0, 0, 0)) should be: Wed Nov 22 2023 00:00:00 GMT+1300 (New Zealand Daylight Time)

Looks like the state isn't being reset if a user doesn't submit the form, so I'm wondering how I can force this reset to occur. Any suggestions?

then use the return cleanup function from useEffect to clear state. that will run when your component unmounts i.e. when you go to your home component — Quak_2023
– Quak_2023, Commented Nov 21, 2023 at 20:59

Quak_2023 · Accepted Answer · 2023-11-21 21:10:12Z

2

You can use the clean up function from useEffect which will run uncomponent unmounts so in you case that could clear the form state

useEffect(() => {
  // Anything in here is fired on component mount.
  return () => {
    // Anything in here is fired on component unmount.

  }
}, []);

answered Nov 21, 2023 at 21:10

Quak_2023

6153 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cactusman07 Over a year ago

Thanks, I was also able to make the following update to reset the state: consts.jsx: export const defaultValues = () =>{ return{ name: "", description: "", startDate: new Date(new Date().setHours(0, 0, 0, 0)), endDate: "", status: "DRAFT" } } and then: [formValues, setFormValues] = useState(defaultValues()),

Cactusman07 · Accepted Answer · 2023-12-12 22:36:18Z

0

After taking into account object referential equality, I was also able to make the below updates to reset the state:

consts.jsx:

    export const defaultValues = () =>{
      return{
        name: "",
        description: "",
        startDate: new Date(new Date().setHours(0, 0, 0, 0)),
        endDate: "",
        status: "DRAFT"
      }
    }

and then:

[formValues, setFormValues] = useState(defaultValues())

edited Dec 12, 2023 at 22:36

answered Nov 21, 2023 at 21:20

Cactusman07

1,0411 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

React not resetting form values when user opens a new form

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related