Soy nuevo en reaccionar y me topé con un problema con el que necesito ayuda. Estoy colocando varios elementos de entrada y estoy tratando de cambiar sus valores en función de un cambio de estado que, en este caso, es manual (verdadero o falso);

El código es una forma simple donde tiene 12 entradas dentro a través de un bucle. Mi problema es que, según si el manual es verdadero o falso, quiero cambiar el valor de las entradas.

Si el manual devuelve verdadero, quiero que actúe normalmente (ingrese normalmente), pero cuando el manual devuelve falso, quiero que todos mis valores de entrada muestren el número 12 y viceversa. El estado manual se activa mediante un botón, como se ve a continuación.

Tengo dos problemas aquí:

1. Si establezco el valor en una cadena vacía, entonces no puedo actualizarlo
2. Si condiciono qué mostrar si tengo dos entradas, una con el valor y otra sin, según el estado devuelto del manual, obtengo el error controlado y no controlado por hacer esto.

¿Alguien puede ayudarme a implementar esto? He intentado usar múltiples soluciones sin éxito:

 import React, {useState, useEffect, useRef} from 'react'; function App() { const [budget, setBudget] = useState([]) const [manual, setManual] = useState(false); const handleInput = inputEv =>{ const budgetState = budget; const input = {index: inputEv.target.getAttribute('index'), value: inputEv.target.value}; // if data input already exists - update it if(budgetState.some(data=>data.index === input.index)){ var current = budgetState.find(data=>data.index === input.index); current.value = input.value; } else { budgetState.push(input) setBudget(budgetState); } } return ( <div> <form className="inputs"> {Array(12).fill().map((e, index)=>( <div key={index} className="month"> <input type="text" onChange={handleInput} index={index} disabled={manual ? false : true}/> </div> ))} </form> <button onClick={()=>setManual(!manual)}>Click</button> </div> ); } export default App;