React Hooks - set state to initial state

Question

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: {}
  });```

Answer 1

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

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

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