Как сделать флажок, если значение существует в массиве объекта в реаги

Question

Как сделать флажок установленным, если в массиве объекта существует значение вactjs?

Я пробовал использовать функцию include, но она не работает.

У меня есть массив объектов в ключе employeeUnder -

Мой массив -

"employeeUnder": [
                {
                    "_id": "5d1a0a8a09b9cb0034d01aaf",
                    "employ": {
                        "_id": "5d120eba60093e02248d6a81",
                        "name": "Sehzan"
                    }
                },
                {
                    "_id": "5d1a0a8a09b9cb0034d01ab0",
                    "employ": {
                        "_id": "5d120eba60093e02248d6a83",
                        "name": "Sumit"
                    }
                },
                {
                    "_id": "5d1a0a8a09b9cb0034d01ab1",
                    "employ": {
                        "_id": "5d120eba60093e02248d6a7c",
                        "name": "Hariom"
                    }
                }
            ],

Я должен проверить, если -

this.state.allemployees._id === employeeUnder.employ._id, тогда флажок должен быть установлен.

Флажок Мой код для ввода -

if (this.state.allemployees && this.state.allemployees.length > 0) {
            return (this.state.allemployees.map((employee) =>
         <tr key={employee.empmainid}>
          <td>{employee.empname}</td>
           <td>{employee.empid}</td>
            <td><input onChange={this.handleCheckbox} getUsername={employee.empname} className="" type="checkbox" checked name={employee.empmainid} value={employee.empmainid} /></td>
                                                                        </tr>))
 }

Сейчас все флажки установлены, потому что я не применил условие. Я хочу, если значение существует в массиве объекта, то оно должно быть проверено в противном случае НЕТ.

Answer 1

Оформить заказ в этой песочнице: https://codesandbox.io/s/blissful-edison-bjh0s

Мы будем работать с двумя массивами здесь:

1. все сотрудники (никогда не видоизменяются)
2. employeeUnder (всегда обновляется)

Мы можем динамически изменять данные внутри employeesUnder - , проверяя / переключая соответствующий тег input.

По сути, внутри события onChange() мы передадим id, связанный с employee, если input уже был проверен, это означает, что он уже был в массиве employeesUnder. Поэтому мы будем использовать этот идентификатор, чтобы filter уволить этого сотрудника. Обратное произойдет, если идентификатор не будет найден внутри array. Таким образом, мы добавили бы сотрудника к employeesUnder.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    employeesUnder: [
      {
        _id: "5d1a0a8a09b9cb0034d01aaf",
        employ: {
          _id: "5d120eba60093e02248d6a81",
          name: "Sehzan"
        }
      },
      {
        _id: "5d1a0a8a09b9cb0034d01ab0",
        employ: {
          _id: "5d120eba60093e02248d6a83",
          name: "Sumit"
        }
      },
      {
        _id: "5d1a0a8a09b9cb0034d01ab1",
        employ: {
          _id: "5d120eba60093e02248d6a7c",
          name: "Hariom"
        }
      }
    ],
    allEmployees: [
      {
        _id: "3ds8f8ds9d8fds9f8a9f8afaf",
        employ: {
          _id: "eworweokrkowekoo34324234",
          name: "Woofers"
        }
      },
      {
        _id: "5d1a0a8a09b9cb0034d01aaf",
        employ: {
          _id: "5d120eba60093e02248d6a81",
          name: "Sehzan"
        }
      },
      {
        _id: "5d1a0a8a09b9cb0034d01ab0",
        employ: {
          _id: "5d120eba60093e02248d6a83",
          name: "Sumit"
        }
      },
      {
        _id: "5d1a0a8a09b9cb0034d01ab1",
        employ: {
          _id: "5d120eba60093e02248d6a7c",
          name: "Hariom"
        }
      }
    ]
  };

  handleCheck = id => {
    const { allEmployees, employeesUnder } = this.state;
    const employeesUnderIds = employeesUnder.map(employee => employee._id);

    if (employeesUnderIds.includes(id)) {
      //remove employee from employeesUnder list
      const newArrWithRemovedEmployee = employeesUnder.filter(employee => {
        return employee._id !== id;
      });

      this.setState({
        ...this.state,
        employeesUnder: newArrWithRemovedEmployee
      });
    } else {
      //add employee to employeesUnder list
      const employeeIndex = allEmployees.findIndex(
        employee => employee._id === id
      );

      const newArrWithAddedEmployee = [
        ...employeesUnder,
        allEmployees[employeeIndex]
      ];

      this.setState({
        ...this.state,
        employeesUnder: newArrWithAddedEmployee
      });
    }
  };

  createList = () => {
    const { allEmployees, employeesUnder } = this.state;
    const employeesUnderIds = employeesUnder.map(employee => employee._id);

    return allEmployees.map(employee => {
      return (
        <div>
          <label>{employee.employ.name}: </label>
          <input
            type="checkbox"
            value={employee._id}
            checked={employeesUnderIds.includes(employee._id)}
            onChange={() => this.handleCheck(employee._id)}
          />
        </div>
      );
    });
  };

  render() {
    return <div>{this.createList()}</div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);