React function return only one <option>-CodePudding

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;```

CodePudding user response：

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.

CodePudding user response：

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!

CodePudding user response：

Try to use map() instead of for loop.

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

CodePudding user response：

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