I have some thing like this:

const someComponent = (props) => {
  var list = [];
  for (var i = 0; i < 10; i++) {
    list.push(
      <button
        onClick={() => props.handleClick(i)}
      >
        {i}
      </button>
    )
  }

  i=7;

  return (
    {list}
  )
}

then the buttons will all have the handleClick function called with i=7, instead of the looped value 0,1,2,etc, what am I doing wrong?