Keep data in inputs using ant design - reactjs

Question

I created an application with 2 steps. On each step user should add some data in inputs.
After clicking on button 2, the user changes the step. I want to create a scenario:
User fill form from first step and after that click on button 2
When user clicks on button 1, the first form should appear with the data that was added previously.
const [state, seState] = useState(1);
const one = () => {
seState(1);
};
const two = () => {
seState(2);
};
return (
<div>
{state === 1 ? <Form1 /> : <Form2 />}
<button onClick={one}>1</button>
<button onClick={two}>2</button>
</div>
);
};
Demo: https://codesandbox.io/s/basic-usage-antd480-forked-kdyyn?file=/index.js:252-615
Question: Has ant design this build in functionality? How to keep data from each step, and when user will switch the steps the data should be inside inputs?

Answer 1

To keep the data, no matter ant or not, you would need to make a choice. Firstly you can keep all the forms in the DOM and use CSS to hide them (sandbox):
const [state, seState] = useState(1);
const one = () => {
seState(1);
};
const two = () => {
seState(2);
};
return (
<div>
<div style={state === 1 ? { display: "block" } : { display: "none" }}>
<Form1 />
</div>
<div style={state === 2 ? { display: "block" } : { display: "none" }}>
<Form2 />
</div>
<button onClick={one}>1</button>
<button onClick={two}>2</button>
</div>
);
Secondly you can choose to re-fill the form values every time you do setState by keeping the data in a shared store such as redux or userReducer. I choose the first approach for simple forms that do not require too much logic and don't have large DOMs. Second approach can be a better choice in dynamic and complex data scenarios.