En una lista de ciertos registros donde estoy llenando el menú desplegable de un componente de entrada. El valor predeterminado se establece en la carga de la página, pero necesito actualizarlo al hacer clic en un botón. Consulte el código a continuación.

Inicio.js

 const allList = [ { id: "1", value: "Fruits" }, { id: "2", value: "Vegetables" }, { id: "3", value: "Grains" }, { id: "4", value: "Milk" }, { id: "5", value: "Meat" }, { id: "6", value: "Fish" }, { id: "7", value: "Pulses" } ]; const [itemList, setItemList] = useState(allList); const [newValue, setNewValue] = useState(allList[0].value) // I want to set the value on click of cancel button const handleCancel = (e) => { setNewValue(allList[2].value) setPopup(false); }; return ( <> <DataList defaultValue={newValue} list="itemListOptions" id="itemList" placeholder="Search/select items" data={itemList} onSelectionChange={itemChanged} ></DataList> {popup === true ? ( <Popup okbtnClick={handleOK} canclebtnclick={handleCancel} /> ) : null} </> )

DataList.js

 <input defaultValue={props?.defaultValue ?? ""} className="form-control cpselect" id={props?.id ?? ""} list={props?.list ?? ""} placeholder={props?.placeholder ?? ""} onChange={props?.onSelectionChange ?? ""} /> <datalist key={props.id} id={props?.list ?? ""}> {props.data.map((d) => { return <option key={d.id} id={d.id} value={d.value}></option>; })} </datalist>

Mi intención es cambiar el valor predeterminado dentro del campo de entrada, al hacer clic en el botón Cancelar. Aquí carga el primer elemento y al hacer clic en el evento debe cargar el tercer elemento. ¿Cuál es la mejor solución óptima?

Consulte el enlace Codesandbox: https://codesandbox.io/s/clever-rumple-ig0wwj