lundi 28 septembre 2020

how to set multi data from checkbox in react?

here in my code i have 5 checkboxes that i want to push their values if they were checked but when i tick a checkbox and then tick another one an error displayes that says TypeError: Cannot read property 'value' of null

and this is my code:

import React, { useState, useEffect } from 'react';
import Label from '../../styles/Label';

function AlertReminder() {
  const [selectedReminders, setSelectedReminders] = useState([]);

  useEffect(() => {
    console.log(selectedReminders);
  }, [selectedReminders]);

  const remindersList = '1 hour before,12 hour before,24 hour before,48 hour before,1 week ago'.split(',');
  console.log(remindersList);
  const changeHandler = (e) => {
    if (selectedReminders.includes(e.target.value)) {
      selectedReminders.splice(selectedReminders.indexOf(e.target.value), 1);
      console.log(selectedReminders);
    } else {
      setSelectedReminders(selectedReminders => [...selectedReminders, e.target.value]);
      console.log(selectedReminders);
    }
  };

  return (
    <div>
      <Label>Alert Reminders:</Label>

      <form>

        {
        remindersList.map(
          (c) => (
            <label>
              {c}
              <input type="checkbox" value={c} onChange={changeHandler} />
            </label>
          )
        )
      }
      </form>
    </div>
  );
}

export default AlertReminder;



Aucun commentaire:

Enregistrer un commentaire