Building reusable form components in React

Rushi Arumalla — Mon, 01 Mar 2021 03:21:28 +0000

I've read and watched many demos that show you how to create form components with a form and component library, but wrapping inputs in form controls can get quite repetitive especially if you are working with a large application. I'll be using CRA(create-react-app), Chakra UI's form components and react-hook-form for this demo (Feel free to use any libraries you like ex. Formik, Material UI, etc.).

To follow along run this command inside of your react app:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion react-hook-form

Here's a traditional pattern you will see for a form input:

import { useForm } from "react-hook-form";
import {
  FormControl,
  FormLabel,
  FormErrorMessage,
  Input,
} from "@chakra-ui/react";

function App() {
  const { register, errors, handleSubmit } = useForm({
    defaultValues: {
      name: "",
    },
  });

  const onSubmit = (values) => {
    console.log("Form Submitted", { values });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <FormControl>
          <FormLabel>Name: </FormLabel>
          <Input
            id="name"
            name="name"
            ref={register({ required: "Please enter your name" })}
          />
          <FormErrorMessage>{errors.name}</FormErrorMessage>
        </FormControl>
      </div>
      <button type='submit'>Submit</button>
    </form>
  );
}

export default App;

You might be thinking that it doesn't look too bad. But what if you had > 10 fields on this screen, or had to do this over and over across your application. We can clean this up by creating an input that you could reuse all over your application. Let's create a file called InputField.js and add the below code.

import { useController } from "react-hook-form";
import {
  FormControl,
  FormErrorMessage,
  FormLabel,
  Input,
} from "@chakra-ui/react";

const useMetaError = ({ invalid, isTouched }) => {
  const errorMessage = (isTouched && invalid?.message) || "";
  return {
    errorMessage,
    hasError: !!errorMessage,
  };
};

export const InputField = (props) => {
  const { type = "text", label } = props;
  const { field, meta } = useController(props);
  const { errorMessage, hasError } = useMetaError(meta);
  return (
    <div>
      <FormControl isInvalid={hasError}>
        <FormLabel>{label}</FormLabel>
        <Input {...field} type={type} />
        <FormErrorMessage>{errorMessage}</FormErrorMessage>
      </FormControl>
    </div>
  );
};

So let's start with useController, a hook that lets us create a controlled input, giving us access to the form we created in App.js. Using the meta prop we can create our own function to handle the error useMetaError, which will return an error if the input has been touched and has an error. The rest is just passing in props from our form, so let's take a look at how this looks in App.js:

import { useForm } from "react-hook-form";
import { InputField } from "./inputField";

function App() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      name: "",
    },
  });

  const onSubmit = (values) => {
    console.log("Form Submitted", { values });
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <InputField
        name="name"
        label="Name: "
        control={control}
        rules={{ required: "Please enter your name" }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Now all we have to do is pass in the control that we get from useForm instead and our InputField.js will handle the rest.

And boom 🚀 , we can now use our InputField component inside of any form handled by react-hook-form in our application!

An better way to map over components in React

Rushi Arumalla — Tue, 23 Feb 2021 06:48:27 +0000

So earlier this week, I found out about an interesting way to map components in react. Here's an example of what I most commonly see.

A Todos component then returns a list of TodoCard:

export const Todos = () => {
  return (
    <div>
      {todos.map(todo => (
        <TodoCard key={todo.id} todo={todo} />
      ))}
    </div>
  )
}

Here we have to explicitly give react the key, or your console will be filled with a nasty error 🤮. Turns out we can let react handle the key with React.Children.toArray(). Lets refactor the above component:

export const Todos = () => {
  return (
    <div>
      {React.Children.toArray(todos.map(todo => <TodoCard todo={todo} />))}
    </div>
  )
}

And tada 🎉, we no longer have to handle keys!

DEV Community: Rushi Arumalla

Building reusable form components in React

An better way to map over components in React