CODEWITHSUNDEEP
javascriptreactjsfor-loop
user7522621
user7522621

Reputation:

for loop only returns the initial index in reactJS

I'm a React JS newbie, so as my practice, I'm creating a dynamic birtdate form. My first challenge is listing of years from 1900 to current year (2017) in a selection of birth year, so I used the for loop to make it shorter rather than the horrible way of listing the years one-by-one in the markup. The code below didn't execute successfully, it returned 2017 only.

export default class Items extends Component {
  render() {
    return(
      <div>
        <form>
          <select name='year' className='yearSelect'>
            <option value="">Year</option>
            {
              for(let yearCount = 2017; yearCount >= 1900; yearCount--)
                return <option value={yearCount}>{yearCount}</option>
            }
          </select>
        </form>
      </div>
    );
  }
}

In the console, it threw an error that says: enter image description here

It's the curly brace that bothers me because of the scope so I had to delete the curly brace of the for loop and indent the line inside it.

Upvotes: 0

Views: 74

Answers (1)

Irfan Ali
Irfan Ali

Reputation: 2258

Update your code like below.

export default class Items extends Component {
  render() {
       let options = [];
         for(let yearCount = 2017; yearCount >= 1900; yearCount--)
             options.push((<option value={yearCount} key={yearCount}>{yearCount}</option>));
    return(
      <div>
        <form>
          <select name='year' className='yearSelect'>
            <option value="">Year</option>
            { options }
          </select>
        </form>
      </div>
    );
  }
}

Upvotes: 1

Related Questions