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;```
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.
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!
Try to use map() instead of for loop.
{
this.state.championList.map(champion => (
<option value={champion}>
{champion}</option>
))
}