Create dropdownlist options from string within react app

Question

I need to display a dropdownlist element with some optgroup labels in my react components.

So I created this method :

 onRenderCategories: any = () => {

        var scope = "";
        var rendu = "";

        for (var scopes in this.props.categories) {
            var ensemble: Array<CategoryTemplateInfos> = this.props.categories[scopes];
            if (ensemble.length == 0) continue;
            scope = ensemble[0].scope;
            rendu += "<optgroup label=" + scope + ">";
            for (var j = 0; j < ensemble.length; j++) {
                var categorie: string = ensemble[j].label;
                var id_categorie: string = ensemble[j].id;
                rendu += "<option value=" + id_categorie+">" + categorie+"</option>";
            }
             rendu += "</optgroup>";
        }
        return rendu;
    }

the output of this method is as excepted ie the html content to put here

 <select >
       <option value="">--Please select a category--</option>
       {this.onRenderCategories()} //here
  </select>

It didn't work!

So how can I fix this issue to convert a string to HTML elements ?

Thanks,

I tried to convert this method to a component but I get the same result — Lamloumi Afif
– Lamloumi Afif, Commented Sep 13, 2018 at 15:08
is this a typo or you forgot to invoke the onRenderCategories method? {this.onRenderCategories} — Sagiv b.g
– Sagiv b.g, Commented Sep 13, 2018 at 15:08

Lamloumi Afif · Accepted Answer · 2018-09-13 15:32:01Z

1

Try this:

onRenderCategories: any = () => {

    let scope = "";
    let items:JSX.Element[] = [];

    for (var scopes in this.props.categories) {
        let ensemble: Array<CategoryTemplateInfos> = this.props.categories[scopes];
        if (ensemble.length == 0) continue;
        scope = ensemble[0].scope;
        let options = ensemble.map(item => <option value={item.id} key={item.id}>{item.label}</option>)
        let itemstmp = <optgroup label={scope} key={scope}>{options}</optgroup>
        items.push(itemstmp);
    }
    return items;
}


<select >
       <option value="">--Please select a category--</option>
       {this.onRenderCategories()} //here
</select>

edited Sep 13, 2018 at 15:32

Lamloumi Afif

9,12728 gold badges106 silver badges195 bronze badges

answered Sep 13, 2018 at 15:10

Shivam Gupta

1,23810 silver badges10 bronze badges

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

1 Comment

Shivam Gupta Over a year ago

@Lamloumi Afif edited to make sure the code is correct. Glad I could help.

Pavel Denisjuk · Accepted Answer · 2018-09-13 15:09:20Z

0

React doesn't work with HTML, it works with JSX, which is only similar to HTML at first glance. In fact it is pure Javascript once JSX is processed by babel.

First of all, you need to invoke your function: {this.onRenderCategories()} - notice the parenthesis - you don't have those in your code. Then, in your categories function you need to switch to actual JSX, and not concat strings because that will not work.

I think the best thing is to go through official React tutorials explaining what React IS and how it works. After you read that, this question will resolve on its own.

So please check out the official documentation :)

answered Sep 13, 2018 at 15:09

Pavel Denisjuk

1,47312 silver badges13 bronze badges

Collectives™ on Stack Overflow

Create dropdownlist options from string within react app

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related