Implement a React component that manages a form's state and validates user inputs.

Steilla Mitchel 649 26 Jul 2023

1 Answers

Aryan Kumar 27 Jul 2023

Sure, here is an example of a react component that manages a form's state and validates user inputs:

import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
const Form = () => {
 const [formState, setFormState] = useState({
   name: "",
   email: "",
   password: "",
 });
 const { register, handleSubmit } = useForm();
 const onSubmit = (data) => {
   console.log(data);
 };
 const validateName = (name) => {
   if (!name) {
     return "Name is required";
   } else if (name.length < 5) {
     return "Name must be at least 5 characters long";
   }
   return null;
 };
 const validateEmail = (email) => {
   if (!email) {
     return "Email is required";
   } else if (!/\S+@\S+\.\S+/.test(email)) {
     return "Invalid email address";
   }
   return null;
 };
 const validatePassword = (password) => {
   if (!password) {
     return "Password is required";
   } else if (password.length < 8) {
     return "Password must be at least 8 characters long";
   }
   return null;
 };
 useEffect(() => {
   register("name", {
     required: true,
     maxLength: 100,
     validator: validateName,
   });
   register("email", {
     required: true,
     validator: validateEmail,
   });
   register("password", {
     required: true,
     maxLength: 100,
     validator: validatePassword,
   });
 }, []);
 return (
   <form onSubmit={handleSubmit(onSubmit)}>
     <input
       id="name"
       name="name"
       type="text"
       placeholder="Name"
       value={formState.name}
       onChange={(event) => setFormState({ name: event.target.value })}
     />
     <input
       id="email"
       name="email"
       type="email"
       placeholder="Email"
       value={formState.email}
       onChange={(event) => setFormState({ email: event.target.value })}
     />
     <input
       id="password"
       name="password"
       type="password"
       placeholder="Password"
       value={formState.password}
       onChange={(event) => setFormState({ password: event.target.value })}
     />
     <button type="submit">Submit</button>
   </form>
 );
};
export default Form;

Sure, here is an example of a React component that manages a form's state and validates user inputs:

JavaScript

import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";

const Form = () => {
  const [formState, setFormState] = useState({
    name: "",
    email: "",
    password: "",
  });

  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  const validateName = (name) => {
    if (!name) {
      return "Name is required";
    } else if (name.length < 5) {
      return "Name must be at least 5 characters long";
    }
    return null;
  };

  const validateEmail = (email) => {
    if (!email) {
      return "Email is required";
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      return "Invalid email address";
    }
    return null;
  };

  const validatePassword = (password) => {
    if (!password) {
      return "Password is required";
    } else if (password.length < 8) {
      return "Password must be at least 8 characters long";
    }
    return null;
  };

  useEffect(() => {
    register("name", {
      required: true,
      maxLength: 100,
      validator: validateName,
    });
    register("email", {
      required: true,
      validator: validateEmail,
    });
    register("password", {
      required: true,
      maxLength: 100,
      validator: validatePassword,
    });
  }, []);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        id="name"
        name="name"
        type="text"
        placeholder="Name"
        value={formState.name}
        onChange={(event) => setFormState({ name: event.target.value })}
      />
      <input
        id="email"
        name="email"
        type="email"
        placeholder="Email"
        value={formState.email}
        onChange={(event) => setFormState({ email: event.target.value })}
      />
      <input
        id="password"
        name="password"
        type="password"
        placeholder="Password"
        value={formState.password}
        onChange={(event) => setFormState({ password: event.target.value })}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

Use code with caution. Learn more

content_copy

This component uses the useForm hook from react-hook-form to manage the form's state and validate user inputs. The useForm hook provides a number of methods for registering form fields, validating inputs, and submitting the form.

The validateName, validateEmail, and validatePassword functions are custom validation functions that are used to check the validity of the user's input. These functions can be as simple or as complex as needed.

The onSubmit function is called when the user submits the form. This function can be used to handle the form submission, such as saving the form data to a database or sending an email.

The Form component also uses the useEffect hook to register the form fields with the useForm hook. This ensures that the form fields are registered correctly, even if the component is re-rendered.

This is just a simple example of how to implement a React component that manages a form's state and validates user inputs. There are many other ways to implement this functionality, depending on the specific needs of the application.

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

Implement a React component that manages a form's state and validates user inputs.

Can you answer this question?

1 Answers