Quiero crear varias opciones con los elementos de la "Lista de campeones", pero mi función solo devuelve una opción con "Aatrox" e ignora las demás, ¿qué debo hacer?
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;```Tu puedes hacer
this.state.championList.map((item) => ( <option value={item} key={item}>{item}</option> ))Directamente en el JSX.
El propósito principal de foreach es iterar, no crear algo.
Es por eso que debes usar un mapa en tu caso.
Cuando usa el "retorno", sale de su método, por lo tanto, es por eso que escribió solo 1 vez.
quieres algo como esto en lugar de funcOption en tu selección haz esto:
{ this.state.championList.map(champ => ( <option value={champ}>{champ}</option> )); }la razón por la que su funcOption devuelve solo una opción es porque regresó de la función en su primera iteración del bucle for. Si guardó las opciones en una lista y luego las devolvió al final de funcOption, ¡también funcionaría!
Intenta usar map() en lugar de bucle for.
{ this.state.championList.map(champion => ( <option value={champion}> {champion}</option> )) }