title: Always get the id of the last iteration ReactJS
body: <p>I'm trying to select an id using a onClick method, the only problem is that when i click a button only the last id is displayed.</p>
  <pre><code>const renderTableData = () =&gt; {
  let id = 0;
  return (
    &lt;tr&gt;
      {days.map((val) =&gt; (
        &lt;td&gt;
          {timeSlot.map((time, i) =&gt; {
            if (occupiedSlots().result.includes(id + 1)) {
              return (
                &lt;button id={id++} className=&quot;disabledButton&quot;&gt;
                  {time}
                &lt;/button&gt;
              );
            } else {
              return (
                &lt;button id={id++} className=&quot;activeButton&quot; onClick ={() =&gt; {canBookSlot({id})}}&gt; 
                  {time}
                &lt;/button&gt;
              );
            }
          })}
        &lt;/td&gt;
      ))}
    &lt;/tr&gt;
  );
  };
  </code></pre>
  <p>This is what the <code>canBookSlot()</code> function looks like:</p>
  <pre><code> const canBookSlot = (id) =&gt; {
  let userDetailsString = localStorage.getItem(&quot;userDetails&quot;);
  const userDetailsObj = JSON.parse(userDetailsString)
  
  if(userDetailsObj.canBook != 0){
        Axios.post('http://localhost:3001/api/book/week1/ex', {
           room: userDetailsObj.room,
           id: id
      })
  
      return console.log(id) 
  } else {
    return console.log(&quot;somethings wrong&quot;)
  }
  </code></pre>
  <p>};</p>
  <p>The output is always 70. how do i fix this?</p>