Forward Ref example

Author: svwoodhouse

Sections/Section 10/01-starting-project/src/components/Login/Login.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useReducer, useState } from 'react';
+import React, { useContext, useEffect, useReducer, useRef, useState } from 'react';
 
 import Card from '../UI/Card/Card';
 import classes from './Login.module.css';
@@ -48,6 +48,8 @@ const Login = () => {
   const { isValid: passwordIsValid } = passwordState
 
   const authCtx = useContext(AuthContext)
+  const emailInputRef = useRef();
+  const passwordInputRef = useRef();
 
   useEffect(()=>{
    const identifier =  setTimeout(() => {
@@ -93,13 +95,22 @@ const Login = () => {
 
   const submitHandler = (event) => {
     event.preventDefault();
-    authCtx.onLogin(emailState.value, passwordState.value)
+    if(formIsValid){
+      authCtx.onLogin(emailState.value, passwordState.value)
+    }
+    else if (!emailIsValid){
+      emailInputRef.current.focus()
+    }
+    else {
+      passwordInputRef.current.focus()
+    }
   };
 
   return (
     <Card className={classes.login}>
       <form onSubmit={submitHandler}>
           <Input
+            ref={emailInputRef}
             type="email"
             label="Email"
             id="email"
@@ -109,6 +120,7 @@ const Login = () => {
             onBlurHandler={validateEmailHandler}
           />
           <Input
+            ref={passwordInputRef}
             type="password"
             label="Password"
             id="password"
@@ -118,7 +130,7 @@ const Login = () => {
             onBlurHandler={validatePasswordHandler}
           />
         <div className={classes.actions}>
-          <Button type="submit" className={classes.btn} disabled={!formIsValid}>
+          <Button type="submit" className={classes.btn}>
             Login
           </Button>
         </div>

Sections/Section 10/01-starting-project/src/components/UI/Input/Input.js

@@ -1,6 +1,17 @@
+import React, { useRef, useImperativeHandle } from 'react'
 import classes from './Input.module.css'
 
-const Input = (props) => {
+const Input = React.forwardRef((props, ref) => {
+    const inputRef = useRef();
+
+    const activate = () => {
+        inputRef.current.focus();
+    }
+    useImperativeHandle(ref ,() => { 
+        return {
+            focus: activate
+    }})
+    
     return (
         <div
         className={`${classes.control} ${
@@ -9,6 +20,7 @@ const Input = (props) => {
       >
         <label htmlFor={props.id}>{props.label}</label>
         <input
+            ref={inputRef}
             type={props.type}
             id={props.id}
             value={props.value}
@@ -17,6 +29,6 @@ const Input = (props) => {
           />
         </div>
     )
-}
+})
 
 export default Input