Add a Form TextInput

In this step, we will pretty much copy and paste the functionality of the <GenerateInput> and use it for a new <GenerateTextInput> component. The only different really is visually how the two input fields show up- input vs text-box. First let’s create the <GenerateTextInput> component:

import { Row, Col, Form, Input } from 'antd';

type InputType = {
  name: string;
  value: string;
  handleInputChange?: (event: any) => void;
};

export const GenerateInput = ({
  name,
  value,
  handleInputChange,
}: InputType) => (
  <Row>
    <Col span={12} offset={6}>
      <Form.Item label={`${name}`}>
        <Input
          placeholder={`${name}`}
          name={`${name}`}
          value={value}
          onChange={handleInputChange}
        />
      </Form.Item>
    </Col>
  </Row>
);

export const GenerateTextInput = ({
  name,
  value,
  handleInputChange,
}: InputType) => (
  <Row>
    <Col span={12} offset={6}>
      <Form.Item label={`${name}`}>
        <Input.TextArea
          placeholder={`${name}`}
          name={`${name}`}
          value={value}
          onChange={handleInputChange}
        />
      </Form.Item>
    </Col>
  </Row>
);

Now let’s add the title, description, and content fields and ensure that the forms work as expected. Enter dummy data into the fields and ensure that you can see a console.log of the data once the submit button is pressed.

import { Row, Col, Form, Button } from 'antd';
import { submitForm } from '../utils/submitForm';
import { GenerateInput, GenerateTextInput } from './GenerateFields';

export const CreateRecipe = () => {
  const initiateCreateRecipe = () => {
    console.log('submitted form');
    console.log(inputs);
  };

  const { inputs, handleInputChange, handleSubmit } = submitForm(
    {
      title: '',
      description: '',
      content: '',
    },
    initiateCreateRecipe,
  );

  return (
    <Form onFinish={handleSubmit}>
      <GenerateInput
        name="title"
        value={inputs.title}
        handleInputChange={handleInputChange}
      />
      <GenerateInput
        name="description"
        value={inputs.description}
        handleInputChange={handleInputChange}
      />
      <GenerateTextInput
        name="content"
        value={inputs.content}
        handleInputChange={handleInputChange}
      />
      <Row>
        <Col span={16} />
        <Col span={4}>
          <Form.Item label="Create Recipe">
            <Button type="primary" htmlType="submit">
              Create Recipe
            </Button>
          </Form.Item>
        </Col>
      </Row>
    </Form>
  );
};