Создать опцию выбора в реагировать JS от объекта

Question

Я новичок в реакторе-редуксе. Я действительно знаю, что этот вопрос - очень простой вопрос,

Здесь у меня есть объект, который похож на

questionsCount : [ {
    Id : "CSS"
    count: "1",
    level:"Easy",
    type: Non_code},{
    Id : "CSS"
    count: "2",
    level:"Medium",
    type: code},
    {
    Id : "CSS"
    count: "5",
    level:"Tough",
    type: code},
    {
    Id : "java"
    count: "2",
    level:"Tough",
    type: Non-code},
    {
    Id : "Html"
    count: "4",
    level:"Easy",
    type: code},]

Теперь у меня есть один выпадающий список, в котором я хочу создать параметры, поэтому я попытался

return this.state.questionsCount.map((item) =>
            <option key={item.Id}>{item.Id}</option>
        );

 In the props I get the level type.

Теперь, вот что создает все элементы option с повторяющимися идентификаторами.

Теперь, что я хочу сделать, это,

элемент option будет похож, во-первых, он должен иметь только значения элементов уровня,

css code:0,Non_code:1

Итак, в настоящее время его дублируют.

Его дублируют, потому что Идентификатор повторяется. Кто-нибудь может мне с этим помочь ? Спасибо

Здесь у меня есть этот объект. Теперь в этом объекте есть несколько объектов, у которых есть Id, count, level and type.

Теперь из этих объектов я хочу создать опции выбора из этого.

Имеет три уровня различий.

ожидаемый результат будет как, Это будет только легкий уровень

<option>Css code:0,non_code-1></option>
<option>Html code:4,non_code-0></option>

для сложных вариантов,

<option>Css code:5,non_code-1></option>
<option>java code:0,non_code-2></option>

то же самое для средних и жестких.

Одна технология может иметь вопросы с типом кода или без кода типа типа легкий, средний или жесткий. Итак, я хочу, чтобы раскрывающийся список этой технологии зависел от уровней.

Если код или не код отсутствует, то для него будет 0.

Answer 1

Из того, что я понимаю в вашем случае, вы хотите создать выпадающий список в зависимости от уровня сложности. Чтобы достичь этого, вам нужно сначала отфильтровать наш вопрос на основе трудного перед рендерингом, например

processQuestions(questionsCount, difficulty) {
  const res = questionsCount.filter(item => item.level === difficulty);
  return res.reduce((acc, item) => {
     if (acc[item.Id]) {
        acc[item.Id] = { ...acc[item.Id], [item.type]: acc[item.Id][item.type]? acc[item.Id][item.type] + 1 : 1};
     } else {
        acc[item.Id] = { [item.type]: 1};
     }
     return acc;
  }, {})
}
render() {
   const { difficulty } = this.props;
   const questionsData = this.processQuestions(this.state.questionCount, difficulty);
   return Object.entries(questionsData).map(([questionId, data]) => {
        return (
           <option key={questionId}>{questionId} code: {data.code} non_code: {data['Non-code']}</option>
        ) 
   })
}