React function return only one <option>

Question

I want to create multiple options with the items in the "championList" but my function only returns one option with "Aatrox" and ignore the others, what should I do?


class ChampionSelect extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            champion: require('../loldata/champion.json'),
            championList: ['Aatrox', 'Ahri', 'Akali', 'Akshan', 'Alistar', 'Amumu', 'Anivia', 'Annie', 'Aphelios', 'Ashe', 'Aurelion', 'Azir', 'Bard', 'Blitzcrank' ]
        };

        this.funcOption = this.funcOption.bind(this);
    }

    funcOption() {
        for (let i = 0; i < this.state.championList.length; i++) {
            return <option value={this.state.championList[i]}>{this.state.championList[i]}</option>
        }
    }
    
    render() {
        return (
            <div> teste:
            <select>
                {this.funcOption()}
                <option>teste</option>
            </select>
            </div>
        );
    }
}

export default ChampionSelect;```

Return statement immediately ends loop execution. Please consider to utilize map method instead of for loop — Krzysztof Safjanowski
– Krzysztof Safjanowski, Commented May 20, 2022 at 12:35
Does this answer your question? Rendering React Components from Array of Objects — Sysix
– Sysix, Commented May 20, 2022 at 12:37
Adding to both the comments above, you should refrain from using a for loop inside your JSX. This SO answer explains why: stackoverflow.com/a/22877049/10276412 — Karthik Sivasubramaniam
– Karthik Sivasubramaniam, Commented May 20, 2022 at 12:49

Alberto Nasello · Accepted Answer · 2022-05-20 13:17:10Z

4

You can do

this.state.championList.map((item) => (
   <option value={item} key={item}>{item}</option>
))

Directly into the JSX.

The main purpose of foreach it's to iterate, not creating something.

That's why you should use a map in your case.

When you use the "return" you go out from your method, so, that's why it wrote only 1 time.

edited May 20, 2022 at 13:17

answered May 20, 2022 at 12:38

Alberto Nasello

613 bronze badges

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

6 Comments

bturner1273 Over a year ago

Idk if you did it for brevity but your option is malformed, you need an </option> tag

Daniel Beck Over a year ago

@bturner1273 no, it's self-closing.

bturner1273 Over a year ago

@Daniel Beck it isn't though because his open <option> tag is closed

bturner1273 Over a year ago

now it looks good!

Krzysztof Safjanowski Over a year ago

Please consider to follow React rules and add key property that should be unique for each mapped entry

|

bturner1273 · Accepted Answer · 2022-05-20 12:49:13Z

1

you want something like this instead of funcOption in your select do this:

{
    this.state.championList.map(champ => (
        <option value={champ}>{champ}</option>
    ));
}

the reason your funcOption is returning only one option is because you returned from the function in your first iteration of the for loop. If you saved the options to a list then returned that at the end of funcOption it would also work!

edited May 20, 2022 at 12:49

answered May 20, 2022 at 12:38

bturner1273

7207 silver badges19 bronze badges

Comments

Omar Nader Draz · Accepted Answer · 2022-05-20 12:42:14Z

0

Try to use map() instead of for loop.

{
  this.state.championList.map(champion => (
    <option value={champion}> 
  {champion}</option>
))
}

answered May 20, 2022 at 12:42

Omar Nader Draz

613 bronze badges

Comments

Krzysztof Safjanowski · Accepted Answer · 2022-05-20 12:45:10Z

Suggestion from my comment leads us to map implementation like:

class ChampionSelect extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      championList: ['Aatrox', 'Ahri', 'Akali', 'Akshan', 'Alistar', 'Amumu', 'Anivia', 'Annie', 'Aphelios', 'Ashe', 'Aurelion', 'Azir', 'Bard', 'Blitzcrank']
    };

    this.funcOption = this.funcOption.bind(this);
  }

  funcOption() {
   return this.state.championList.map(e => {
     return <option key={e} value={e}>{e}</option>
   })
  }

  render() {
    return ( <div> teste:
      <select> {
        this.funcOption()
      } <option>teste</option>
      </select> 
      </div>
    );
  }
}

ReactDOM.render(<ChampionSelect />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Please bare in mind that mapping against some collection in React requires also key property

Collectives™ on Stack Overflow

React function return only one <option>

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related