Single reference
A simple <input/> element looks like:
JSX
import { useEffect, useRef, useState } from react;
const SimpleInput = () => {
const inputRef = useRef(null);
useEffect( () => {
inputRef.current.focus();
}, []);
return(
<div className = 'Input'>
<input ref = {inputRef} placeholder = 'Name'></input></div>);
}
export default SimpleInput;
The <input/> will focus after DOM is loaded. If you execute console.log(inputRef):
JSX
{current: input}
inputRef is an object with a single current property.
Multiple references
But what would happen with an undetermined array of <input/>?
We need to define inputRef as an array, so that current property becomes an array as well.
JSX
import { useEffect, useRef, useState } from react;
const ArrayInputs = () => {
// The number of references is undetermined
// After fetching data, we can determine array's length
const inputRef = useRef([]);
// Data is empty before fetching
const [data, setData] = useState([]);
useEffect( () => {
// We will fetch data and receive an array
// let data = fetchData();
// To simplify, let's suppose that the array is:
let data = ['Name', 'Age', 'Gender'];
// We define the size of array after receiving the data
inputRef.current = new Array(data.length);
// We set state
setData(data);
}, []);
useEffect( () => {
// If data is filled -> focus
if(data.length !== 0) {
// Focusing the last <input></input>
inputRef.current[data.length - 1].focus();
}
}, [data]);
return(
<div className = 'Inputs'>
{data.map((element, i) => <input ref = {el => inputRef.current[i] = el} placeholder = {element}></input>)}
</div>
);
}
export default ArrayInputs;
The last <input/> will focus after DOM is loaded.
If you execute console.log(inputRef):
JSX
{current: [input, input, input]}
Now, inputRef is an object with an array as current property. We can access to a single reference by writing inputRef.current[i].
Top comments (0)