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 — CertainPerformance
– CertainPerformance, Commented Oct 22, 2020 at 22:07

Dylan Kerler · Accepted Answer · 2020-10-23 16:15:04Z

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, 2020 at 16:15

answered Oct 22, 2020 at 22:14

Dylan Kerler

2,2072 gold badges12 silver badges25 bronze badges

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

4 Comments

MomasVII Over a year ago

Hey, this doesn't seem to loop at all. I think it must be close though. Thanks

MomasVII Over a year ago

Still nothing unfortunately

MomasVII Over a year ago

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!

Dylan Kerler Over a year ago

Oh... It was the semi-colon there :) Ive removed it now

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related