React의 양식 🚧 가장 단순함

Form validation can be a nightmare sometimes. After trying out some patterns of code, I came to a conclusion. That this can be an optimal solution without any plugins.
NOTE: Better ways are always welcome & I'm in search for it ⌛

입력 필드

Let's get started. First things first. Let's create a component for input field.

• input field to accept user inputs and pass other common props
• handleInvalid method to do it's magic when it detects error
• onChange method to reset the error and pass on the control to the parent component

import React from "react";

/** We'll be using this only for username and password **/
export const InputField = props => {
  const { message, ...rest } = props; // Filter what you need and transfer rest to input
  let [error, setError] = React.useState(false); //display error message

  const handleInvalid = e => {
    e.preventDefault();
    setError(true);
    props.handleInvalid(e);
  }; // Handle error
  const onChange = e => {
    setError(false);
    props.handleChange(e);
  }; // Reset error

  // The Component
  return (
    <div className="input-container">
      <input {...rest} onInvalid={handleInvalid} onChange={onChange} />
      {error ? <span className="error-message">{message}</span> : ""}
    </div>
  );
};

양식 구성요소

Now let's create a Form Component that will wrap our input fields around a form and some methods to handle it.

• We have a state variable which will hold our form object
• handleChange method to handle specific updates in input fields according to name.
• handleSubmit method which would help us hitting API once all fields are filled properly
• action="javascript:void(0)" this was of my particular interest when I was trying to find out the best way to handle forms. It would prevent the form element from doing default work.

import React from "react";
import { InputField } from "./InputField";

export const Form = props => {

  const [state, setState] = React.useState({ mail: "", password: "" });

  const handleChange = e =>
    setState({ ...state, [e.target.name]: e.target.value });

  const handleSubmit = e => console.info("FORMDATA", state);

  return (
    <form
      action="javascript:void(0)"
      onChange={handleChange}
      onSubmit={handleSubmit}
    >
      <InputField name="mail" type="email" message="We need a proper mail id" />
      <InputField name="password" minLength="9" type="password" message="Not a valid password"
      />
      <input type="submit" value="Login" />
    </form>
  );
};

App.css

.error-message {
  color: darkred;
  text-align: right;
  font-size: 12px;
}

.input-container {
  display: flex;
  flex-direction: column;
  width: 40%;
  margin: auto;
}

.input-container > input {
  border-top: none;
  border-right: none;
  border-left: none;
  margin-bottom: 5px;
  margin-top: 20px;
}

input:invalid {
  border-color: darkred;
}