title: react table row show column on button click
body: <p>I have a table being built dynamically by mapping over an array. Each item in the array gets a row. One of the columns in each of these rows is a <code>select</code>. I only want that column's content to show when a button in the same row's next column is clicked.</p>
  
  <p>My plan was to add some sort of a toggle bool property to each object in my array, but then when I try to toggle it in my button's onclick, my eslint is complaining because I'm trying to modify a property of the parameter I sent into the function called by the onclick.</p>
  
  <p>What is the appropriate way to do this?</p>
  
  <p>Here's the code for the table:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tbody&gt;
      {myArray.map(row =&gt; (
        &lt;tr key={`test-${row.name}`}&gt;
          &lt;td&gt;
            &lt;div className="testClass"&gt;{row.id}&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;{row.name}&lt;/td&gt;
          &lt;td&gt;
            &lt;Select
              options={this.getOptions(row.id)}
              onSelect={this.onOptionSelect}
              placeholder="Select something"
            /&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;button onClick={() =&gt; { changeStuff(row); }}&gt;{ row.myToggle ? 'Save' : 'Change something' }&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;
      ))}
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>