react checkbox to pass a string value to update query

This is my code:

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import {
setLastOrderDays,
updateLastOrderAlert
} from "reducers/DealerPreferencesReducer";
class Alerts extends Component {
state = {
prevId: null,
checked:  ""
};
static getDerivedStateFromProps(props, state) {
// Store prevId in state so we can compare when props change.
// Clear out previously-loaded data (so we don't render stale stuff).
if (props.dealerID !== state.prevId) {
//update action goes here...
//props.actions.getUsers(props.dealerID);
return {
prevId: props.dealerID
};
}
// No state update necessary
return null;
}
componentDidMount = () => {
this.setState({ days: this.props.preferences.last_order_alert });
//this.setState({ checked: this.props.preferences.last_order_alert_enabled})
};
toggleAlerts = e => {
//console.log('lastOrder', this.props.preferences.last_order_alert_enabled);
this.props.actions.updateLastOrderAlert(
this.props.preferences.id,
this.props.dealerID,
this.props.isGroup,
this.props.preferences.last_order_alert,
this.props.preferences.last_order_alert_enabled === this.handleCheck
);
};
handleCheck = event => {
console.log('called', this.setState);
this.setState({checked: event.target.checked})
};
handleAlertDays = e => {
e.persist();
if (String(e.target.value) !== this.props.preferences.last_order_alert) {
this.props.actions.updateLastOrderAlert(
this.props.preferences.id,
this.props.dealerID,
this.props.isGroup,
String(e.target.value),
this.props.preferences.last_order_alert_enabled
);
}
};
render = () => {
console.log('checked', this.state.checked);
const { preferences } = this.props;
return (
<div className="preferenceContainer">
<div className="preferenceRow lg">
<div className="preferenceLabelWrapper">
<div className="preferenceLabel">Enable Alert</div>
<div className="preferenceSubLabel">
Toggles the Last Order Alert Email
</div>
</div>
<div className="preferenceInput">
<input
type="checkbox"
checked={this.state.checked}
onChange={this.handleCheck}
/>
</div>
</div>
<div className="preferenceRow">
<div className="preferenceLabelWrapper">
<div className="preferenceLabel">Days Since Last Order</div>
</div>
<div className="preferenceInput">
<input
type="number"
value={preferences.last_order_alert}
onBlur={this.handleAlertDays}
onChange={e =>
this.props.actions.setLastOrderDays(e.target.value)
}
style={{ width: "50px" }}
/>
</div>
</div>
<div className="preferenceRow">
<button
className={'btn btn-primary'}
type="submit"
onClick={this.toggleAlerts}
>Save
</button>
</div>
</div>
);
};
}
const mapStateToProps = state => ({
dealerID: state.DealerTreeReducer.selectedShop.id,
isGroup: state.DealerTreeReducer.selectedShop.folder,
preferences: state.DealerPreferencesReducer,
loading: state.DealerTreeReducer.loading
});
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(
{ updateLastOrderAlert, setLastOrderDays },
dispatch
)
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(withRouter(Alerts));

What I am trying to do is that everytime I click the checkbox, I want to get either a one or a zero which in turn I will use to pass in to toggleAlerts to update the preferences of my user in my app. The checkbox right now only checks and unchecks. The only time it changes is when I hit the saved button. What I ultimately want to do is to be able to save the changes when I hit the save button. can anyone point me in the right direction?

modifying you're handleCheck function and setState that value and access that state variable while triggering toggleAlerts something like this.

handleCheck = event => {
console.log('called', this.setState);
this.setState({checked: Number(event.target.checked) }) //change here
};
toggleAlerts = e => {
this.props.actions.updateLastOrderAlert(
this.props.preferences.id,
this.props.dealerID,
this.props.isGroup,
this.props.preferences.last_order_alert,
this.props.preferences.last_order_alert_enabled === this.state.checked //change here
);
};