mardi 27 novembre 2018

how to send checkbox data in reactjs

I do not how to explain properly, but I will try. I have a multiple checkboxes that represents which day of week the shop will be opened. So, I have this data api

enter image description here

, where day_of_week tells in which day the checkbox should be checked. Ex. see here

enter image description here

I need to send the right attribute to the server, which is day_of_week to change the status of checkbox. However, now only one of the checkboxes can be checked. This is my code

  {businessGroup.opening_hours ? businessGroup.opening_hours.map((open_hour, i) => (
              <div key={i} className="openHours d-flex">

                <DatePicker
                  placeholder="Start Date"
                />
                <DatePicker
                  placeholder="End Date"
                />

                <div className="weekDays">
                  {
                    ['Mo1', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'].map((day, inx) => (
                      <div className="weekChekbox" key={inx}>
                        <div>{day}</div>
                        <Checkbox
                          checked={open_hour.day_of_week === inx}
                          onChange={() => this.setState({
                            businessGroup: {
                              ...businessGroup,
                              opening_hours: [
                                ...businessGroup.opening_hours.splice(0, i),
                                {
                                  ...businessGroup.opening_hours[0],
                                day_of_week: inx,
                                },
                                ...businessGroup.opening_hours.splice(1),
                              ],
                            },
                          })}
                        />
                      </div>
                    ))

                  }
                </div>
})

Do not pay much attention to closing bracket it is not important now, cause I just cut the piece of code from whole code. So, how i should make my onChange correctly to send the day_of_week correctly and any checkboxes can be checked.

Thank you)




Aucun commentaire:

Enregistrer un commentaire