Btukfyl

I am working on Wizard form in reactjs, Form is working fine but sometime when i click on next button data is not coming to my console when i click on previous button and submit data again it coming to the console but in first attempt data is not coming to my console and it give me null message please check it out and help me . Thanks

Form Code

I used this form from ( Ant-design )

import React from 'react';

import styled from 'styled-components';

import 'antd/dist/antd.css';

import './FirstStep.css';

import { Form, Input } from 'antd';



const FormItem = Form.Item;

const FormCard = styled.div`

  max-width: 100%;

  overflow: hidden;

  transition: all 0.3s cubic-bezier(0.41, 0.094, 0.54, 0.07) 0s;

  margin-top: 30px;

`;



    class RegisterStepOne extends React.Component {

      handleSubmit = e => {

        e.preventDefault();

        this.props.form.validateFields((err, values) => {

          if (!err) {

            console.log('Received values of form: ', values.toString());

          }

        });

      };

      render() {

        const { getFieldDecorator } = this.props;

        return (

          <div>

            <FormCard>

              <Form onSubmit={this.handleSubmit} className="login-form">

                <FormItem>

                  {getFieldDecorator('firstName', {

                    rules: [

                      {

                        required: true,

                        message: 'Please input your First name!',

                        whitespace: true,

                      },

                    ],

                  })(<Input placeholder="First name" />)}

                </FormItem>

                <FormItem>

                  {getFieldDecorator('lastName', {

                    rules: [

                      {

                        required: true,

                        message: 'Please input your Last name!',

                        whitespace: true,

                      },

                    ],

                  })(<Input placeholder="Last name" />)}

                </FormItem>

                <FormItem>

                  {getFieldDecorator('email', {

                    rules: [

                      {

                        type: 'email',

                        message: 'The input is not valid E-mail!',

                      },

                      {

                        required: true,

                        message: 'Please input your E-mail!',

                      },

                    ],

                  })(<Input placeholder="Email" />)}

                </FormItem>

                <FormItem>

                  {getFieldDecorator('lastPosition', {

                    rules: [

                      {

                        required: true,

                        message: 'Please input your Last Position!',

                        whitespace: true,

                      },

                    ],

                  })(<Input placeholder="Present or last position" />)}

                </FormItem>

                <FormItem>

                  {getFieldDecorator('lastCompany', {

                    rules: [

                      {

                        required: true,

                        message: 'Please input your Last Company!',

                        whitespace: true,

                      },

                    ],

                  })(<Input placeholder="Present or last Company" />)}

                </FormItem>

              </Form>

            </FormCard>

          </div>

        );

      }

    }

    export default RegisterStepOne;

Looking at your comment above, it looks as though you are logging this.state to the console immediately after calling this.setState. You can't reliably check the value of this.state immediately after calling this.setState. this.setState is asynchronous and you will get the the old state value. If you want to log the value after the state update completes, there is a second argument to this.setState that accepts a callback function to run when the state update complets. For example:

this.setState({ user: { ...values } }, () => console.log(this.state.user));

You can read more about this behavior in the official React documentation on setState here.