title: In react, how to target specific table row with onChange event?
body: <p>I have table that contains multiple rows and has a dropdown for the last column on each row which contains 3 values <strong>Incomplete</strong>, <strong>Fail</strong>, and <strong>Pass</strong>. If the dropdown is selected to Pass then I need to show checkmark icon, and if the dropdown is selected to Fail, then bug icon would show up.</p>
  
  <p>The above logic seems to be working fine. What I am struggling with is how do I target the specific row of the table only and not have any affect on the other rows. I only want to show the icon to the row that I am targeting (in this example, row 1).</p>
  
  <p>For example, this is what my current table looks like. It's affecting both of the rows:
  <a href="https://i.stack.imgur.com/Wiwnx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wiwnx.png" alt="enter image description here"></a> </p>
  
  <p>Likewise for the other Fail option:</p>
  
  <p><a href="https://i.stack.imgur.com/EL15s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EL15s.png" alt="enter image description here"></a></p>
  
  <p>Here's what my code looks like:</p>
  
  <pre><code>this.state = {
      ...
      test_steps: [],
    status: ""
  };
  
  selectStatus(e) {
    var selected = $('.status_list option:selected').text();
    if(selected == "Pass") {
        this.setState({status: e.target.value})
        $('.checkmark').show();
        $('.bug').hide();
        $(".checkmark").css({"display": "inline", "marginLeft": "10px"});
    } else if(selected == "Fail") {
        this.setState({status: e.target.value})
        $('.bug').show();
        $('.checkmark').hide();
        $(".bug").css({"display": "inline", "marginLeft": "10px"});
    } else {
        this.setState({status: e.target.value})
        $('.checkmark').hide();
        $('.bug').hide();
    }
  }
  
  tsteps = test_steps.map((testStep, index) =&gt; {
    return (
    &lt;tr key={index}&gt;
        &lt;td&gt;{testStep.step_number}&lt;/td&gt;
        &lt;td&gt;{testStep.description}&lt;/td&gt;
        &lt;td&gt;{testStep.expected_results}&lt;/td&gt;
        &lt;td&gt;{testStep.other_info}&lt;/td&gt;
        &lt;td&gt;
            &lt;select 
              className="status_list form-control" 
              id="status" 
              onChange={this.selectStatus.bind(this)} // calling selectStatus function
            &gt;
              &lt;option className={styles.emptyVal}&gt;&lt;/option&gt;
              &lt;option&gt;Incomplete&lt;/option&gt;
              &lt;option&gt;Fail&lt;/option&gt;
              &lt;option&gt;Pass&lt;/option&gt;
            &lt;/select&gt;
            &lt;div className="checkmark" style={{display: 'none'}}&gt;
                &lt;i className={`fas fa-check ${styles.check_icon}`}&gt;&lt;/i&gt;
            &lt;/div&gt;
            &lt;div className="bug" style={{display: 'none'}}&gt;
                &lt;i className={`fas fa-bug ${styles.bug_icon}`}&gt;&lt;/i&gt;
            &lt;/div&gt;
            {testStep.status}
        &lt;/td&gt;
    &lt;/tr&gt;
    );
  });
  </code></pre>
  
  <p><strong>UPDATED CODE:</strong></p>
  
  <pre><code>this.state = {
    test_steps: [],
    status: []
  };
  
  selectStatus(event, index) {
    this.setState(oldState =&gt; {
      const newStatus = oldState.status.slice();
      newStatus[index] = event.target.value;
      return {
        status: newStatus
      };
    });
  };
  
  tsteps = test_steps.map((testStep, index) =&gt; {
    return (
    &lt;tr key={index}&gt;
        &lt;td&gt;{testStep.step_number}&lt;/td&gt;
        &lt;td&gt;{testStep.description}&lt;/td&gt;
        &lt;td&gt;{testStep.expected_results}&lt;/td&gt;
        &lt;td&gt;{testStep.other_info}&lt;/td&gt;
        &lt;td&gt;
            &lt;select
                className="status_list form-control" 
                value={this.state.status[index]}
                onChange={e =&gt; this.selectStatus(e, index)} &gt;
                &lt;option className={styles.emptyVal}&gt;&lt;/option&gt;
                &lt;option&gt;Incomplete&lt;/option&gt;
                &lt;option&gt;Fail&lt;/option&gt;
                &lt;option&gt;Pass&lt;/option&gt;
              &lt;/select&gt;
            {this.state.status[index] === "Pass" &amp;&amp; 
                &lt;div className="checkmark"&gt;
                  &lt;i className={`fas fa-check ${styles.check_icon}`}&gt;&lt;/i&gt;
                &lt;/div&gt;
              }
              {this.state.status[index] === "Fail" &amp;&amp; 
                &lt;div className="bug"&gt;
                  &lt;i className={`fas fa-bug${styles.bug_icon}`}&gt;&lt;/i&gt;
                &lt;/div&gt;
              }        
              {testStep.status}
        &lt;/td&gt;
    &lt;/tr&gt;
    );
  });
  </code></pre>
  
  <p><strong>Error that I am getting:</strong>
  Uncaught TypeError: Cannot read property 'value' of null</p>