Estoy usando campos personalizados en la tabla de arranque de reacción.

 { dataField: "hours", text: "# of Hours", sort: true, footer: "# of Hours", headerStyle: (colum, colIndex) => { return { width: "10%" }; }, formatter: (cellContent, row) => { return ( <div className="form-row"> <AvForm> <Controls.Input name="hours" type="text" placeholder="Enter Hours" value={rosterData.hours} handleChange={handleChange} /> </AvForm> </div> ); }, },

Mi función de cambio de identificador

 const [rosterData, setRosterData] = useState({ S_time: "21:00", hours: "", }); const handleChange = (evt) => { const value = evt.target.value; setRosterData({ ...rosterData, [evt.target.name]: value }); };

Cuando ingreso el valor en el campo, el estado establece ese valor, pero cuando hago clic en el botón Guardar para usar ese valor, el estado se vuelve vacío.

Botón para guardar datos

 { dataField: "action", text: "Action", footer: "Action", isDummyField: true, formatter: (cellContent, row) => { return ( <div> <AiFillSave style={{ color: "#0190d5", cursor: "pointer" }} onClick={() => submitRoster(row.id)} /> </div> ); }, },

función para el botón guardar

 const submitRoster = (id) => { const data = { id: id, S_time: rosterData.S_time, hours: rosterData.hours, }; console.log("onclick Data=", data); };