Реагировать js карта и фильтр

Question

Отображение списка флажков, и я должен показать состояние флажка на основе загрузки данных массива

ссылочный код

AllGroups      = [{id:1, name:one},{id:2,name:two},{id:3, name:three},{id:4,name:four}]
userCatChecked = [{id:2,name:two},{id:3, name:three}]

Статус флажка должен отображаться на основе истинного / ложного при сопоставлении массива userCatChecked

<form>
{this.state.AllGroups((item, index) => {

      //  Here need condition 
      // if( item.id === userCatChecked.id  ) {
      // show true checkbox
      //}else{
      // show false checkbox
      //}


   <input type="checkbox" checked={true/false} onChange={ } />
})}
</form>

Answer 1

Как насчет этого?

Вы можете использовать функцию Array.some, чтобы проверить, содержит ли массив объектов элемент.

const AllGroups      = [{id:1, name:'one'},{id:2,name:'two'},{id:3, name:'three'},{id:4,name:'four'}]
const userCatChecked = [{id:2,name:'two'},{id:3, name:'three'}]

const result = AllGroups.map((item, index) => {
  const checked = userCatChecked.some(checked => checked.id === item.id);
  return {...item, checked};
});
console.log('result:', result);

Итак

{this.state.options.AllGroup((item, index) => {
  const checked = userCatChecked.some(checked => checked.id === item.id);
  return <input type="checkbox" checked={checked} onChange={} />;
})}

Answer 2

<form>
    {this.state.AllGroups.map((item, index) => 
       <input
           type="checkbox"
           checked={!!this.state.userCatChecked.find(cat => cat.id === item.id)}
           onChange={ }
       />
    )}
</form>

Answer 3

Еще один способ обработки флажков - через Карта

const userCatChecked = [{id:2,name:'two'},{id:3, name:'three'}];
const checkedItems = new Map();
userCatChecked.map(data => checkedItems.set(data.name, true))

И тогда в вашей форме

<form>
    {this.state.AllGroups.map((item, index) => 
       <input
           type="checkbox"
           checked={checkedItems.get(item.name)}
           onChange={ }
       />
    )}
</form>

Может быть, это также поможет:)