Общее количество вложенных объектов

Question

Я создаю приложение React и у меня есть следующий список:

export const list = [
  {
    id: '1',
    group: 'sports 1',
    sports: [{
      'basketball': [
        {competed: true},
        {won: false}
      ],
      'soccer': [
        {competed: false},
        {won: false}
      ],
      'hockey': [
        {competed: false},
        {won: false}
      ]
    }],
    competedInAll: false
  },
  {
    id: '2',
    group: 'sports 2',
    sports: [{
      'tennis': [
        {competed: true},
        {won: false}
      ],
      'swimming': [
        {competed: true},
        {won: false}
      ],
      'baseball': [
        {competed: false},
        {won: false}
      ]
    }],
    competedInAll: false
  },
  {
    id: '3',
    group: 'sports 3',
    sports: [{
      'volleyball': [
        {competed: true},
        {won: false}
      ],
      'karate': [
        {competed: true},
        {won: false}
      ],
      'surfing': [
        {competed: true},
        {won: false}
      ]
    }],
    competedInAll: false
  }
];

Этот список помещается в состояние с перехватами React:

const [list3, updateList3] = useState(list);

Затем я перебираюсписок вроде так:

const doMagicHere = () => {};

const getStatus = (item) => {
    let length = Object.values(item.sports[0]).filter(x => !x[0].competed).length;
    return length === 0 ? 'competed in all sports' : length + " remaining"
};

<ul>
    {list3.map(item => (
    <li key={item.id}>
        {item.group} ({getStatus(item)})
        <ul>
            {Object.keys(item.sports[0]).map((sport, i) => <li key={i} onClick={() => doMagicHere()}>{sport}</li>)}
        </ul>
    </li>
    ))}
</ul>

Это создаст:

• спорт 1 (осталось 2)
  • баскетбол
  • футбол
  • хоккей
• спорт 2 (1 осталось)
  • теннис
  • плавание
  • бейсбол
• спорт 3 (соревновались во всех видах спорта)
  • волейбол
  • каратэ
  • серфинг

1. Как я могу добавить событие onClick, чтобы общее количество уменьшилось, когда элемент выбран (установлен на true), что позволит тексту читать «2 оставшихся», затем «1 оставшихся» и, в конечном итоге, «соревноваться ввсе виды спорта для этой группы

Answer 1

export const list = [
  {
    id: '1',
    group: 'sports 1',
    sports: [{
      'basketball': [
        {competed: true},
        {won: false}
      ],
      'soccer': [
        {competed: false},
        {won: false}
      ],
      'hockey': [
        {competed: false},
        {won: false}
      ]
    }],
    competedInAll: false
  },
  {
    id: '2',
    group: 'sports 2',
    sports: [{
      'tennis': [
        {competed: true},
        {won: false}
      ],
      'swimming': [
        {competed: true},
        {won: false}
      ],
      'baseball': [
        {competed: false},
        {won: false}
      ]
    }],
    competedInAll: false
  },
  {
    id: '3',
    group: 'sports 3',
    sports: [{
      'volleyball': [
        {competed: true},
        {won: false}
      ],
      'karate': [
        {competed: true},
        {won: false}
      ],
      'surfing': [
        {competed: true},
        {won: false}
      ]
    }],
    competedInAll: false
  }
];

//I would suggest converting the list to a more manageable structure before adding it to the react state so that the doMagicHere() is simple

const parseList = list => {
 return list.reduce((acc,item) => {
 acc[item.group] = {
  id: item.id;
  sports: Object.entries(item.sports).reduce((a,[sport,value]) => {
   a[sport] = value.reduce((x,i) => { x = {...x,...i}; return x;},{});
   return a;
  },{})
 }
 return acc;
 },{})
}
const [sportsList, setSportsList] = useState(parseList(list));

//now sportsList is a more manageable structure

const getStatus = (item) => {
    let length = Object.values(item).filter(x => !x.competed).length;
    return length === 0 ? 'competed in all sports' : length + " remaining"
};

const doMagicHere = (group,sport) => {
   setSportsList({...sportsList,sports:{...sports,sports[sport]:{...sports[sport],competed:true}}});
 }
}

<ul>
    {Object.entries(sportsList).map([group, details] => (
    <li key={details.id}>
        {group} ({getStatus(details.sports)})
        <ul>
            {Object.keys(details.sports).map((sport, i) => <li key={i} onClick={() => doMagicHere(group,sport)}>{sport}</li>)}
        </ul>
    </li>
    ))}
</ul>