title: once deleting out of input, focus previous input react
body: <p>I am having issues trying to focus on a previous input once I delete out of the input that I am in. I have 6 inputs, all with a maxLength of 1. When I press the backspace key I would like to delete the value and move to the previous input. I have tried a variety of things but nothing seems to work how I need.</p>
  <p>Here is my code</p>
  <p>This is the Auth component which is passing props to verify (the page with the inputs)</p>
  <pre><code>const Auth = ({ sub }) =&gt; {
      let params = useParams();
      const navigate = useNavigate();
  
      const [rec, setRec] = useState({
          accept: false,
          email: '',
          phone: '',
          pin: ['', '', '', '', '', '']
      })
  
      const onPaste = (event) =&gt; {
          event.preventDefault()
          const pasted = event.clipboardData.getData(&quot;text/plain&quot;)
          setRec({ ...rec, pin: pasted.split(&quot;&quot;).slice(0, rec.pin.length) })
          // target event last sibling
          event.target.parentNode.lastChild.focus()
      }
  
      function update(event, index) {
          event.preventDefault()
          setRec({
              ...rec, pin: [
                  ...rec.pin.slice(0, index),
                  event.target.value,
                  ...rec.pin.slice(index + 1)
              ]
          })
      }
  
      const handleFocus = (event) =&gt; {
          if (event.target.nextSibling)
              event.target.nextSibling.focus();
  
          // if value is deleted, focus previous sibling
  
          // if all siblings are empty, focus first sibling
          if (event.target.value === '' &amp;&amp; event.target.previousSibling === null)
              event.target.parentNode.firstChild.focus()
  
      }
  
      const onKeyPress = (event) =&gt; {
          // if backspace is clicked, go to previous input
          if (event.key === 'Backspace' &amp;&amp; event.target.value === '') {
              event.target.previousSibling.focus()
          }
      }
  
      const handleChange = (name, value) =&gt; {
          if (name === 'mobile') name = 'phone'
          const recState = {
              ...rec,
              [name]: value,
          }
          setRec(recState)
      }
  
      const toggleAccept = () =&gt; {
          if (!rec.accept) {
              setRec({
                  ...rec,
                  accept: true
              });
          } else {
              setRec({
                  ...rec,
                  accept: false
              });
          }
  
      }
  
      const handleSubmit = async () =&gt; {
          const { accept, email, phone } = rec
  
          if (params.method === 'email' &amp;&amp; !email) return app.actions.setError('Enter an email')
          else if (params.method !== 'email' &amp;&amp; !phone) return app.actions.setError('Enter a phone number')
  
          const send = params.method === 'email' ? { email } : { phone }
  
          if (!accept) return app.actions.setError('Please accept the terms &amp; conditions')
          try {
              await app.actions.setLoading(true)
              // if there is already a user, just login, else create user first
              await user.actions.login(send)
              await app.actions.setLoading(false)
              navigate(`/auth/verify/login/${params.method || 'phone'}`)
          } catch (e) {
              if (e.response &amp;&amp; e.response.status === 404) {
                  // try join
                  await user.actions.join(send)
                  await app.actions.setLoading(false)
                  return navigate(`/auth/verify/join/${params.method || 'phone'}`)
              }
              await app.actions.setLoading(false)
              await app.actions.setError(e)
          }
      }
  
      const handleVerify = async ({ context, method }) =&gt; {
          const { email, phone, pin } = rec
          const joinPin = pin.join('');
  
          if (method === 'email' &amp;&amp; !email) return app.actions.setError('Enter an email')
          else if (method !== 'email' &amp;&amp; !phone) return app.actions.setError('Enter a phone number')
  
          const send = method === 'email' ? { email } : { phone }
  
          await app.actions.setError(null)
          try {
              await app.actions.setLoading(true)
              if (context === 'login') {
                  await user.actions.loginVerify({
                      ...send,
                      pin: joinPin,
                  })
              } else {
                  await user.actions.verify({
                      ...send,
                      pin: joinPin,
                  })
              }
  
              await app.actions.init()
              await app.actions.setLoading(false)
  
              navigate('/')
          } catch (e) {
              await app.actions.setLoading(false)
              await app.actions.setError(e)
          }
      }
  
      return (
          &lt;&gt;
              {sub ?
                  &lt;Verify
                      context={params.context}
                      handleChange={handleChange}
                      handleFocus={handleFocus}
                      handleSubmit={() =&gt; handleVerify({ context: params.context, method: params.method })}
                      onKeyPress={onKeyPress}
                      method={params.method}
                      paste={onPaste}
                      update={update}
                      rec={rec} /&gt;
                  :
                  &lt;Jogin
                      handleChange={handleChange}
                      handleSubmit={handleSubmit}
                      method={params.method}
                      toggleAccept={toggleAccept}
                      rec={rec} /&gt;
              }
          &lt;/&gt;
      )
  }
  
  export default Auth
  </code></pre>
  <p>and here is the verify component</p>
  <pre><code>import React from 'react'
  import { onFormSubmit } from '../../utility/form'
  import { Navigate, useNavigate } from 'react-router-dom'
  import user from '../../model/user'
  import app from '../../model/app'
  
  const Verify = ({ handleSubmit, method, rec, paste, update, handleFocus, onKeyPress }) =&gt; {
      const navigate = useNavigate();
      const { email, phone } = rec
      const send = method === 'email' ? { email: email } : { phone: phone }
  
      const resendPin = async () =&gt; {
          try {
              await app.actions.setLoading(true)
              // if there is already a user, just login, else create user first
              await user.actions.login(send)
              await app.actions.setLoading(false)
              navigate(`/auth/verify/login/${method || 'phone'}`)
          } catch (e) {
              if (e.response &amp;&amp; e.response.status === 404) {
                  // try join
                  await user.actions.join(send)
                  await app.actions.setLoading(false)
                  return navigate(`/auth/verify/join/${method || 'phone'}`)
              }
              await app.actions.setLoading(false)
              await app.actions.setError(e)
          }
      }
  
      const renderContent = () =&gt; {
          const methodLabel = method === 'email' ? 'email address' : 'phone number'
  
          return (
              &lt;&gt;
                  &lt;div id=&quot;back-grad&quot; /&gt;
                  &lt;div className=&quot;col-md-8&quot;&gt;
                      &lt;div className='verify-text-section'&gt;
                          &lt;p className=&quot;verify-text pb-5&quot;&gt;
                              Enter the PIN number we just sent to your {methodLabel}.
                          &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;flex&quot;&gt;
                          {rec.pin.map((s, key) =&gt; (
                              &lt;input key={key} className='code-input mr-2' value={s} maxLength='1' onPaste={(e) =&gt; paste(e)} onKeyDown={e =&gt; onKeyPress(e)} onInput={(e) =&gt; update(e, key)} onChange={(e) =&gt; handleFocus(e)} inputMode='numeric' autoFocus={key === 0} /&gt;
                          ))}
                      &lt;/div&gt;
                      &lt;div className=&quot;verify-resend mt-3&quot; onClick={resendPin}&gt;Resend Code&lt;/div&gt;
                      &lt;div className=&quot;flex margin-set text-center&quot;&gt;
                          &lt;button className=&quot;btn btn-block text-white verify-btn&quot;&gt;
                              &lt;p className=&quot;verify-btn-text&quot;&gt;VERIFY&lt;/p&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/&gt;
          )
      }
  
      return (
          &lt;&gt;
              {rec.email.length &lt; 1 &amp;&amp; rec.phone.length &lt; 1 ? &lt;Navigate to={'/auth'} /&gt;
                  :
                  &lt;div className=&quot;d-flex align-items-center h-full&quot;&gt;
                      &lt;form className=&quot;container&quot; onSubmit={e =&gt; onFormSubmit(e, handleSubmit)}&gt;
                          &lt;div className=&quot;row justify-content-center&quot;&gt;
                              {renderContent()}
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              }
          &lt;/&gt;
      )
  }
  
  export default Verify
  </code></pre>
  <p>any help is appreciated!</p>