CODEWITHSUNDEEP
reactjsreact-hooksuse-state
Paul
Paul

Reputation: 259

React Hooks - set state to initial state

I am using React useState to create an object in state. This is updated to an object of data after a successful API call.

I have a form that can change this state, but I also have a cancel button. How can i restore this state to its initial values (after API call) when cancel is clicked?

Should i create another state variable and store initial state there and then update my state based on that?

  const [basePosition, setBasePosition] = useState({});
  const [position, setPosition] = useState({
    id: '',
    title: '',
    description: '',
    authoredBy: '',
    createdDate: '',
    lastUpdatedBy: '',
    lastUpdateDate: '',
    sliderResponses: [],
    tileResponses: [{}],
    template: {}
  });```

Upvotes: 3

Views: 13291

Answers (5)

Nikita Madeev
Nikita Madeev

Reputation: 4380

const initialState = {
    id: '',
    title: '',
};

const Test = () => {
    const [position, setPosition] = useState(initialState);

    return <>
        ...form
        <button onClick={() => setPosition(initialState)}>Reset</button>
    </>;
};

Upvotes: 7

amine jisung
amine jisung

Reputation: 117


import React, { useState } from 'react'

// counter 

function Example3() {

    const [initial, setIncrement] = useState(0)


    const increment = () => {
        setIncrement(initial + 1)
    }
    const dincrement = () => {
        setIncrement(initial - 1)
    }


    const reset = () => {

        setIncrement(0)

    }




    return (


        <div>

            <p>{initial}</p>
            <button onClick={increment} >+</button>
            <button onClick={dincrement} >-</button>
            <button onClick={reset}>reset</button>

        </div>


    )




}


export default Example3;

Upvotes: 0

Mario Petrovic
Mario Petrovic

Reputation: 8332

Answer to your question if you should store initial value is Yes.

That would be the easiest way to maintain your code. So put your initial value in a constant:

const INITIAL_VALUES = {
  id: '',
  title: '',
  description: '',
  authoredBy: '',
  createdDate: '',
  lastUpdatedBy: '',
  lastUpdateDate: '',
  sliderResponses: [],
  tileResponses: [{}],
  template: {}
}

Than every time you want to use that initial object, just spread it and all is good (spread to lose reference to constant):

const [basePosition, setBasePosition] = useState({});
const [position, setPosition] = useState({...INITIAL_VALUES});

And later when you reset:

setPosition({...INITIAL_VALUES})

Upvotes: 0

Arnab
Arnab

Reputation: 961

You need not to create another State. Just declare an initial state which will not be changed and assign it to the Position state when it is needed to be reset. EX:

import React,{useState} from 'react'

const YourComponent = () =>{
 const initialState = {
    id: '',
    title: '',
    description: '',
    authoredBy: '',
    createdDate: '',
    lastUpdatedBy: '',
    lastUpdateDate: '',
    sliderResponses: [],
    tileResponses: [{}],
    template: {}
  }
 const [basePosition, setBasePosition] = useState({});
  const [position, setPosition] = useState(initialState);
  const resetState = () =>{
     setPosition(initialState)
   }
}

Upvotes: 0

Zayn
Zayn

Reputation: 741

Don't create another state variable just to store initial state as it will cause another re render instead when your component is mounted then intialize your initial state object:

let initialState = null;

React.useEffect(() => {
  initialState = position;
},[])

When you want to reset to initial state just use:

setPosition(initialState);

Upvotes: 0

Related Questions