I have a small card that has a toggle switch and I want it to post true when toggled on and false when toggled off. I have already created the card and the functionality. Just not sure where to create the endpoint that sends data to the backend.
Here is where the switch works.
<div style={{ paddingLeft: "35px" }}>
<div className="order-card">
<div className="header-section">
<h2 className="card-titles">Customer Notifications</h2>
</div>
<h4 style={{ padding: "12px 15px" }} className="order-title">
Send customers reminders before auto-payment date
</h4>
<div style={{ width: "70%", textAlign: "left" }}>
<Switch
checked={this.state.isNotificationEnabled}
onChange={e =>
this.setState({
isNotificationEnabled: e.target.checked
})
}
color="primary"
/>
</div>
</div>
</div>
When you toggle the switch on it changes state to true so this.state.isNotificationEnabled = true.
Now here is the question. Can I create the endpoint in componentDidMount()?
async componentDidMount() {
this.saveGmailInfo();
console.log(
"this.state.isNotificationEnabled",
this.state.isNotificationEnabled
);
const code = this.props.history.location.query.code;
if (code) {
const ep = `${process.env.REACT_APP_API}/partners/zoom/auth`;
const results = await axios.post(ep, { code });
if (results.data.success) {
this.setState({ zoom: true });
this.props.history.push("/partners/customization");
window.location.reload();
} else {
// toast.error(results.data.message)
this.props.history.push("/partners/customization");
}
} else {
}
// get permissions for logo + dashboard
await this.getLogoAndDashboardPermissions();
await this.getThemePermissions();
await this.getMailChimpPermissions();
await this.getZoomPermissions();
}
Right now when I toggle the Switch I don't see the console log below console.log("this.state.isNotificationEnabled",this.state.isNotificationEnabled)
That means I am not hitting the function componentDidMount. How can I hit that function so I can create my endpoint in there?
componentDidMount only called once in the initial render.
you can call the function when then switch value changes.
<Switch
checked={this.state.isNotificationEnabled}
onChange={e => {
this.setState({
isNotificationEnabled: e.target.checked
})
// you can add code that sends the switch value to the backend
}
}
color="primary"
/>