React(nextjs) Classcomponent to function. What to do with props?

Question

I have react class component and I am trying to change it to function. But I don't know what to do with props.

This is my entire function.

const RegistrationForm = () => {

    const [firstname, setFirstname] = useState('');
    const [secondname, setSecondname] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [confirmDirty, setconfirmDirty] = useState(false);

    const handleSubmit = e => {
      e.preventDefault();
    axioswal
      .post('/api/users', {
        firstname,
        secondname,
        email,
        password,
      })
      .then((data) => {
        if (data.status === 'ok') {
          dispatch({ type: 'fetch' });
          redirectTo('/');
        }
      });
  };

  const handleConfirmBlur = e => {
      const { value } = e.target;
      setState({ confirmDirty: state.confirmDirty || !!value });
    };

    const compareToFirstPassword = (rule, value, callback) => {
      const { form } = props;
      if (value && value !== form.getFieldValue('password')) {
        callback('Two passwords that you enter is inconsistent!');
      } else {
        callback();
      }
    };

    const validateToNextPassword = (rule, value, callback) => {
      const { form } = props;
      if (value && state.confirmDirty) {
        form.validateFields(['confirm'], { force: true });
      }
      callback();
    };

    const { getFieldDecorator } = props.form;

      const formItemLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      };
      const tailFormItemLayout = {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      };
      return (
        <Form {...formItemLayout} onSubmit={handleSubmit}>
          <Form.Item
          label={
            <span>
              Firstname&nbsp;
              <Tooltip title="What is your firstname?">
                <Icon type="question-circle-o" />
              </Tooltip>
            </span>
          }
        >
          {getFieldDecorator('Firstname', {
            rules: [{ required: true, message: 'Please input your Firstname!', whitespace: true }],
          })(<Input />)}
        </Form.Item>
        <Form.Item
          label={
            <span>
              Secondname&nbsp;
              <Tooltip title="What is your Secondname?">
                <Icon type="question-circle-o" />
              </Tooltip>
            </span>
          }
        >
          {getFieldDecorator('Secondname', {
            rules: [{ required: true, message: 'Please input your Secondname!', whitespace: true }],
          })(<Input />)}
        </Form.Item>
          <Form.Item label="E-mail">
            {getFieldDecorator('email', {
              rules: [
                {
                  type: 'email',
                  message: 'The input is not valid E-mail!',
                },
                {
                  required: true,
                  message: 'Please input your E-mail!',
                },
              ],
            })(<Input />)}
          </Form.Item>
          <Form.Item label="Password" hasFeedback>
            {getFieldDecorator('password', {
              rules: [
                {
                  required: true,
                  message: 'Please input your password!',
                },
                {
                  validator: validateToNextPassword,
                },
              ],
            })(<Input.Password />)}
          </Form.Item>
          <Form.Item label="Confirm Password" hasFeedback>
            {getFieldDecorator('confirm', {
              rules: [
                {
                  required: true,
                  message: 'Please confirm your password!',
                },
                {
                  validator: compareToFirstPassword,
                },
              ],
            })(<Input.Password onBlur={handleConfirmBlur} />)}
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            {getFieldDecorator('agreement', {
              valuePropName: 'checked',
            })(
              <Checkbox>
                I have read the <a href="">agreement</a>
              </Checkbox>,
            )}
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">
              Register
            </Button>
          </Form.Item>
        </Form>
      );


}

  const WrappedRegistrationForm = Form.create({ name: 'register' })(RegistrationForm);

  WrappedRegistrationForm.getInitialProps = async () => ({
    namespacesRequired: ['common'],
  })

  export default withTranslation('common')(WrappedRegistrationForm);

For example in this line of code.

const { getFieldDecorator } = props.form;

I get this error.

ReferenceError: props is not defined

When I remove props then I get form is not defined. I know basic of props but cant figure out what to do in this case. I will be thankful for any help.

Answer 1

You have to pass props like this const RegistrationForm = (props) => {

I recommend this reading 5 Ways to Convert React Class Components to Functional Components w/ React Hooks

Answer 2

All react functional components take props as a first argument

In other words, what you want is

const RegistrationForm = (props) => {

Answer 3

You're declaring a function component which receives its props as the first argument in the function.

const RegistrationForm = (props) => {

    const [firstname, setFirstname] = useState('');
    const [secondname, setSecondname] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [confirmDirty, setconfirmDirty] = useState(false);