{"size": 1202, "ext": "js", "max_stars_repo_path": "hooks/custom-hook-simple-validation/src/LoginWithCustomHook.js", "max_stars_repo_name": "NathanKr/React", "max_stars_repo_stars_event_min_datetime": "2018-03-17T19:18:44.000Z", "max_stars_repo_stars_event_max_datetime": "2021-03-10T02:13:49.000Z", "max_issues_repo_path": "hooks/custom-hook-simple-validation/src/LoginWithCustomHook.js", "max_issues_repo_name": "NathanKr/React", "max_issues_repo_issues_event_min_datetime": "2021-03-01T22:20:32.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-08T22:38:35.000Z", "max_forks_repo_path": "hooks/custom-hook-simple-validation/src/LoginWithCustomHook.js", "max_forks_repo_name": "NathanKr/React", "max_forks_repo_forks_event_min_datetime": "2018-04-24T04:33:19.000Z", "max_forks_repo_forks_event_max_datetime": "2020-09-13T22:44:15.000Z"}
{"max_stars_count": 41, "max_issues_count": 66, "max_forks_count": 16, "avg_line_length": 24.5306122449, "max_line_length": 77, "alphanum_fraction": 0.5798668885}
import React from "react";
import useInput from "./useInput";

const LoginWithCustomHook = () => {
  const isNameValid = name => name.length > 2;
  const isPasswordValid = password => password.length > 5;
  const styleError = { border: "1px solid red" };

  const nameInput = useInput(isNameValid);
  const passwordInput = useInput(isPasswordValid);

  const handleSubmit = evt => {
    evt.preventDefault();
    console.log(
      `login : name - ${nameInput.value} , password - ${passwordInput.value}`
    );
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="insert name"
          onChange={nameInput.changeHandler}
          style={!nameInput.isValid ? styleError : {}}
        />
        <br />

        <input
          type="password"
          placeholder="insert password"
          onChange={passwordInput.changeHandler}
          style={!passwordInput.isValid ? styleError : {}}
        />
        <br />

        <input
          disabled={!(nameInput.isValid && passwordInput.isValid)}
          type="submit"
          value="Login"
        />
      </form>
    </div>
  );
};

export default LoginWithCustomHook;
