Forms in React 🚧 THE SIMPLEST

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 ⌛

Code Sandbox Link

InputField

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

Form Component

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

Now let's add some css to make it look atleast a little bit uilicious

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

So I hope how easy it can be to handle forms in React. It's all patterns. Critics are most welcome as I'm searching for further best practices in form.
Just let me know if there's something that can be done better than this