Tengo una entrada en el campo final de reacción. El usuario puede ingresar su propio valor. Hay una opción para hacer algo en el formulario, que hace una llamada a la API y almacena los datos en el estado. Si esa es una opción, completamos la entrada con ese valor.

Sin embargo, quiero que el usuario pueda anular ese valor. Si la llamada a la API se vuelve a realizar, quiero que el valor reemplace la entrada actual, pero que aún pueda anularse.

No puedo eliminar completamente el valor de la API, no me permite eliminarlo todo y anular los datos.

Archivo donde renderizo la entrada y se maneja el estado.

 function RenderFilter(index: number) { const apiValue = dataFromAPI; return <TextBox key={index} value1={apiValue ? apiValue.value : null} />; }

Cuadro de texto.jsx

 import { Field } from 'react-final-form'; export interface IInput { name: string; value1: string; } function TextBox({ name, value1 }: IInput) { return ( <Field name={name}> {({ input }) => ( <> <input name={input.name} value={input.value} onChange={input.onChange} /> {value1 && input.onChange(value1)} </> )} </Field> ); } export { TextBox };

¿Algunas ideas?