React: Change field's value from button - reactjs

Question

I have this fairly simple application that has multiple inputs, and only has state for the current field, and the current field's input. When you click on an input, it sets the "current field" and "current input" accordingly, not resetting on blur.
Is there any way to implement having a button that resets the current field's value, as shown below?
import React, { useState } from 'react'
const FieldTest = () => {
const [currentField, setCurrentField] = useState(1)
const [currentInput, setCurrentInput] = useState('A')
const fields = [...Array(4)].map((current, i) => (
<input
key={i}
type='text'
onFocus={e => {
setCurrentField(i + 1)
setCurrentInput(e.target.value)
}}
onChange={e => setCurrentInput(e.target.value)}
defaultValue={String.fromCharCode(64 + i + 1)}
/>
))
return (
<>
<h1>Field Test</h1>
<p>Current Field: {currentField}</p>
<p>Current Input: {currentInput}</p>
{fields}
<button
onClick={e => {
/*Is there any way to implement this by only changing this onClick?*/
}}
>
Reset Current Field's Input
</button>
</>
)
}
export default FieldTest
This could easily be accomplished by refactoring this into a state for each input, or a ref for each input, but if there's any way I could not implement that (as it makes adding variable amounts of inputs a lot easier) then let me know.
Or if there were a completely different way to implement this that also allowed for variable amounts of inputs, let me know!
Thanks!

Answer 1

You can use keep one ref and change its .current value based on the element that is focused.
import React, { useState, useRef } from "react";
export default function App() {
const [currentField, setCurrentField] = useState(1);
const [currentInput, setCurrentInput] = useState('A');
const curInputRef = useRef(null);
const fields = [...Array(4)].map((current, i) => {
return (
<input
key={i}
type="text"
onFocus={(e) => {
setCurrentField(i + 1);
setCurrentInput(e.target.value);
curInputRef.current = e.target; //make the ref point to the focused input
}}
onChange={(e) => setCurrentInput(e.target.value)}
defaultValue={String.fromCharCode(64 + i + 1)}
/>
);
});
return (
<>
<h1>Field Test</h1>
<p>Current Field: {currentField}</p>
<p>Current Input: {currentInput}</p>
{fields}
<button
onClick={(e) => {
if (!curInputRef.current) return;
curInputRef.current.value = ''; //change the value of the focused input to be ''
/*Is there any way to implement this by only changing this onClick?*/
}}
>
Reset Current Field's Input
</button>
</>
);
}
The script in action:
https://codesandbox.io/s/admiring-saha-2uo2f?file=/src/App.js