dimanche 24 mai 2020

React checkbox if checked add value to array

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