Frontend Serverless with React and GraphQL

Start at the beginning and work your way through this project. The code for each step as well as the finished project can be found in the Github repository.

30. Add a Form TextInput

Objective: Create a GenerateTextInput component that will allow for users to enter a text block for recipe directions.

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:

components/GenerateFields.tsx

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.

components/CreateRecipe.tsx

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>
  );
};