React function return only one

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, May 20 '22 at 12:35
Does this answer your question? [Rendering React Components from Array of Objects](https://stackoverflow.com/questions/32157286/rendering-react-components-from-array-of-objects) — Sysix, May 20 '22 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: https://stackoverflow.com/a/22877049/10276412 — Karthik Sivasubramaniam, May 20 '22 at 12:49

Alberto Nasello · Answer 1 · 2022-05-20T13:17:10.730

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 '22 at 13:17

answered May 20 '22 at 12:38

Alberto Nasello

61
3

Idk if you did it for brevity but your option is malformed, you need an tag – bturner1273 May 20 '22 at 12:42
@bturner1273 no, it's self-closing. – Daniel Beck May 20 '22 at 12:45
@Daniel Beck it isn't though because his open – bturner1273 May 20 '22 at 12:46
now it looks good! – bturner1273 May 20 '22 at 12:47
Yes sorry for that! I missed the tag :) – Alberto Nasello May 20 '22 at 12:48
1

Please consider to follow React rules and add `key` property that should be unique for each mapped entry – Krzysztof Safjanowski May 20 '22 at 12:53

bturner1273 · Answer 2 · 2022-05-20T12:49:13.253

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!

score 0 · Answer 3 · answered May 20 '22 at 12:42

0

Try to use map() instead of for loop.

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

answered May 20 '22 at 12:42

Omar Nader Draz

61
3

Krzysztof Safjanowski · Answer 4 · 2022-05-20T12:45:10.393

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

React function return only one

4 Answers4