Odtnhj

I am new to the react-redux. I actually know this question is a very basic question,

Here, I have an object which is like,

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,]

Now,I have one select drop-down where I want to create an options , So I tried

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

 In the props I get the level type.

Now, Here what its creating all the option elements with repetative Id's.

Now, What I want to do is that,

the option element will be like, first it should have only provided level elements meanes,

css code:0,Non_code:1

So,Currently Its getting duplicated .

Its getting duplicated because Id is getting repeated. Can any one help me with this ? Thanks

Here,I have that object. Now In that object there are multiple objects which has Id and count and level and type .

Now, from this objects I want to create the select options from this.

It has three diff levels.

expected Output would be like ,
It will be having only easy level

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

for tough options,

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

same for medium.and tough.

One technology can have code type or non code type questions of type easy or medium or tough. So, I want to create the drop-down of that technolgy depends upon the levels.

If code or non-code not present then it will have 0 for that.

From what I understand in your case, you wish to create a select dropdown based on the difficulty level. To achieve that, you would need to filter our the question based on difficult first before rendering like

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>
 ) 
 )