Tengo esto en mi Row.jsx

 const Row = ({ move }) => { const focusRef = useRef(null) const check = e => {setValue(e.target.value)} return( <input type='text' ref={focusRef} key={move} id={move} readOnly={!(move === tries)} autoFocus={move === tries} value= {value} onChange={check} /> )}

Mi app.jsx

 import { createContext, useState } from 'react'; import Row from './components/Row'; export const TriesContext = createContext() function App() { const [tries, setTries] = useState(0) return ( <div className='space-y-2'> <TriesContext.Provider value={{ tries, setTries }}> <Row move={0} /> <Row move={1} /> <Row move={2} /> <Row move={3} /> <Row move={4} /> <Row move={5} /> </TriesContext.Provider> </div> ); }

En realidad, quiero que los siguientes componentes se enfoquen automáticamente después de que se acepte la primera entrada. He agregado autoFocus={move === tries} pero aparentemente eso no funciona.

tenga en cuenta que las entradas deben completarse en orden ascendente (he hecho las entradas de readonly ) y eso está funcionando. ¿Puedo obtener ayuda?