React js - Save previous value in Ant Design Steps - reactjs

Question

I am using Ant Design Steps for my form but I am having a problem on how to save the value of the previous input.
Here is my code whole code:
import React from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Icon, Input, Button, Steps } from 'antd';
const { Step } = Steps;
const steps = [
{
title: 'First',
content: 'First-content',
},
{
title: 'Second',
content: 'Second-content',
}
];
class NormalLoginForm extends React.Component {
constructor (props) {
super (props) ;
this.state = {
current: 0
}
}
next() {
const current = this.state.current + 1;
this.setState({ current });
}
prev() {
const current = this.state.current - 1;
this.setState({ current });
}
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
};
render() {
const { current } = this.state
const { getFieldDecorator } = this.props.form;
return (
<div>
<Steps current={current}>
{steps.map(item => (
<Step key={item.title} title={item.title} />
))}
</Steps>
<Form onSubmit={this.handleSubmit} className="login-form">
{current === 0 ? (
<Form.Item>
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
<Input
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Username"
/>,
)}
</Form.Item>
): ''}
{current === 1 ? (
<Form.Item>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
type="password"
placeholder="Password"
/>,
)}
</Form.Item>
): ''}
</Form>
{current < steps.length - 1 && (
<Button type="primary" onClick={() => this.next()}>
Next
</Button>
)}
{current === steps.length - 1 && (
<Button type="primary" onClick={this.handleSubmit}>
Done
</Button>
)}
{current > 0 && (
<Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
Previous
</Button>
)}
</div>
);
}
}
What is happening is when I click next, the value of the previous input is gone. What I want to happen is when I click next the previous value will be save so when I click submit both of the values will be output in the console. The code comes from ant design and I used it for example

Answer 1

You should consider storing the data in a state :
constructor (props) {
super (props) ;
this.state = {
current: 0,
firstInput: '',
secondInput: '',
}
}
<Input
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Username"
onChange={(e) => this.setState({firstInput: e.target.value})}
/>,
Then, in your submit press, you will be able to access the values of firstInput and secondInput by doing this.state.firstInput & this.state.secondInput.