import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  let focusRef = useRef(null)

  return (
    <section>
      <h2>Email Signup</h2>
      <input type="text" value={name} placeholder="Name" onChange={(e) => {
        setName(e.target.value)
        if (name.length >= 10) {
          focusRef.current.focus()
        }
      }} />
      <input type="text" value={email} ref={focusRef} placeholder="Email" onChange={(e) => {
        setEmail(e.target.value)
      }} />
    </section>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));