React for loop doesn't send incremental data to function properly

Question

Can someone explain why this loop when rendered and clicked on always sends the one same value to my function

class AppointmentSelect extends React.Component {

changeDate = x => {
    console.log(x);
}

render () {

    let daysArray=[];
    for (var i = 0; i < 7; i++) { 
      daysArray.push( 
        <div className="day" onClick={() => this.changeDate(startDate+i) }>
          <h1>Mo</h1>
          <p>{ startDate + i }</p>
        </div> 
      );
    }
    return <>{ daysArray }</>

}}

changeDate always sends the i as a 7 so it renders as

Mo 1 Mo 2 Mo 3 Mo 4 Mo 5 Mo 6 Mo 7

But clicking any number sends the value "7"

How can I get this to work? Thanks

Does this answer your question? [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — CertainPerformance, Oct 22 '20 at 22:07

Dylan Kerler · Accepted Answer · 2020-10-23T16:15:04.613

2

This is not the correct way to render a list in React. Almost always, you'll want to map over an array instead - This should work:

return (<>
   {
     new Array(7).fill().map((_, index) => ( 
        <div className="day" onClick={() => this.changeDate(startDate+index) }>
          <h1>Mo</h1>
          <p>{ startDate + index }</p>
        </div> 
     )
   }
</>)

edited Oct 23 '20 at 16:15

answered Oct 22 '20 at 22:14

Dylan Kerler

2,007
1
8
23

Hey, this doesn't seem to loop at all. I think it must be close though. Thanks – MomasVII Oct 23 '20 at 14:59
Still nothing unfortunately – MomasVII Oct 23 '20 at 15:40
Sorry had another look and turns out it doesn't work with the () brackets after the =>. I removed the (brackets) around the div and it works. Thanks! – MomasVII Oct 23 '20 at 16:09
1

Oh... It was the semi-colon there :) Ive removed it now – Dylan Kerler Oct 23 '20 at 16:15

React for loop doesn't send incremental data to function properly

1 Answers1