Hi this might be a very newbie question to ask but here is my question. I have check boxes that represent all the days of the week. If a day is checked I want to add it to a array so that on submit I can pass the array to back-end. I copied check box structure from bootstrap to start with. I tried to add logic to see if a box is checked and if it is checked I want to push it to my empty array in state. Also if a checkbox was checked but then unchecked I want to remove the item from the state array. So far I haven't found a way to make this all work.
import React from 'react'
class CalenderSettingsModal extends React.Component {
constructor(props) {
super(props);
this.state={
workStart: 8,
workEnd: '',
workDays:[],
}
handleCheckboxChange = (event)=> this.setState({workDays: event.target.value});
}
render() {
return (
<React.Fragment>
<form>
<div>
<h5>Select your workday(s):</h5>
<div class="custom-control custom-checkbox " >
<input type="checkbox" class="custom-control-input" id="monday" value="monday" onChange={this.handleCheckboxChange}/>
<label class="custom-control-label" for="monday">Monday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tuesday" value="tuesday" onChange={ this.handleCheckboxChange}/>
<label class="custom-control-label" for="tuesday">Tuesday</label>
</div>
</form>
<button >Save settings</button>
</React.Fragment>
);
}
}
export default CalenderSettingsModal;
With this so far I tried to accomplish assigning the value to workDays when the box is checked but isn't working and I'm not sure how I could accomplish what I want to do. Any insight would be appreciated.
Aucun commentaire:
Enregistrer un commentaire