Блог

У меня есть несколько флажков для каждого объекта внутри «Включенные единицы», и я хотел бы сохранить значения и установить флажок.

Массив объектов

 [

    {
      "title": "Kevin Joe",
      "id": "365DmXom2V13xOqagTHczU",
      "enabledUnits": [{}]
    },
    {
      "title": "Kevin 2",
      "id": "365DmXom2V13xOqagTHczU",
      "enabledUnits": [{}]
    }

]
 

Некоторые фиктивные единицы

   const dummyUnits = [
    {
      id: "Unit 1",
      checked: false
    },
    {
      id: "Unit 2",
      checked: false
    },
    {
      id: "Unit 3",
      checked: false
    },
    {
      id: "Unit 4",
      checked: false
    },
    {
      id: "Unit 5",
      checked: false
    }
  ]
 

Если я нажму на Блок 1 и Блок 2 для «Кевин Джо». Это был бы желаемый результат. Добавлен в объект.

 [{
  "title": "Kevin Joe",
  "id": "365DmXom2V13xOqagTHczU",
    "enabledUnits": [
      {
        id: "Unit 1",
        checked: true
      },
      {
        id: "Unit 2",
        checked: true
      }
    ]
  },
  {
    "title": "Kevin 2",
    "id": "365DmXom2V13xOqagTHczU",
    "enabledUnits": [{}]
  }
]
 

Current onChange handler, Is close to working but need the logic to toggle true/false on each checkbox

 const createOnChangeHandlerUnits = (floorPlan: FloorPlan, property: 'enabledUnits') => (
  e: React.ChangeEvent<HTMLInputElement>
) => {
  const {value} = e.target;

  setFloorPlans(floorPlans => {
      return floorPlans.map(entry => {
          if (entry.id === floorPlan.id amp;amp; !entry[property].includes(value.id)) {
              return {
                ...entry, [property]: entry[property].concat(`${value}`)
              };
          } else if (entry.id === floorPlan.id) {
            return {
              ...entry,
              [property]: entry[property]
                .filter(item => item !== value)};
            }
          return entry;
      });
  });
  props.sdk.field.setValue(floorPlans);
};
 

   {dummyUnits.map((unit, i) => {
    return (
      <FormLabel style={{ display: "flex" }} key={i}>
        <input
          type="checkbox"
          name={unit.id} id={unit.id} key={i} value={unit.id}
          onChange={(createOnChangeHandlerUnits(floorPlan, 'enabledUnits'))}
          checked={unit.checked}
        />
        {unit.id}
      </FormLabel>
    )
  })}