Create a select option in the react js from an object

Question

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.

Not able to understand what exactly you want to achieve. Could you show your expected result — Shubham Khatri
– Shubham Khatri, Commented Nov 13, 2018 at 6:18
One thing is that, In the props I get the props.type which will tell that currently what type we need to iterate. I mean Easy or tough or medium — ganesh kaspate
– ganesh kaspate, Commented Nov 13, 2018 at 6:34

Shubham Khatri · Accepted Answer · 2018-11-13 11:38:11Z

2

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

edited Nov 13, 2018 at 11:38

answered Nov 13, 2018 at 7:37

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ganesh kaspate Over a year ago

@shubhamKhatri thanks for your solution. Worked perfectly

Collectives™ on Stack Overflow

Create a select option in the react js from an object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related