for loop only returns the initial index in reactJS

Question

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:

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.

for loops can't "return" stuff. You will need to run that code before the render (putting it into a variable which you then call in that bracket area) — A. L
– A. L, Commented Apr 12, 2017 at 11:29
looks similar to stackoverflow.com/questions/22876978/loop-inside-react-jsx combine it with: stackoverflow.com/questions/3895478/… — BacLuc
– BacLuc, Commented Apr 12, 2017 at 11:59

Irfan Ali · Accepted Answer · 2017-04-12 11:31:08Z

1

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>
    );
  }
}

answered Apr 12, 2017 at 11:31

Irfan Ali

2,3581 gold badge24 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user7522621 Over a year ago

Thanks a lot, bud :)

user7522621 Over a year ago

just one question... What is that key attribute in the <option> tag? What does it do?

Irfan Ali Over a year ago

while rendering element with looping. you must assign key attribute and it should be unique. based on this key react will manipulate elements here.

user7522621 Over a year ago

is that attribute always necessary when manipulating DOM elements with loops?

Irfan Ali Over a year ago

Yes, you must add key attribute in loops.

|

Collectives™ on Stack Overflow

for loop only returns the initial index in reactJS

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related