title: Delete items onClick using ReactJS?
body: <p>I have a Row Component that i am importing into my App.js component and apparently i am able to add new items to the Row but the delete function doesn't seem to be working. I am passing the index and splice but i am not sure what i am doing wrong. Can Anyone please suggest where i am going wrong?</p>
  
  <p>My App.js or my root component looks like this: -</p>
  
  <pre><code>import React, {Component} from 'react';
  import './App.css';
  import Row from './Row.js'
  
   class App extends Component {
     state = {
        rows: [
          {value: 'row1', options:[1,2,3,4,5] },
          {value: 'row2', options:[1,2,3,4,5] },
          {value: 'row3', options:[ 1,2,3,4,5 ]}
       ]
    }
  
   updateValue = (e, idx) =&gt; {
   const rows = [...this.state.rows];
   rows[idx].value = e.target.value;
   this.setState({
      rows,
   });
  }
  
  addRow = () =&gt; {
  const rows = [...this.state.rows, {value:''}];
  this.setState({
      rows,
      });
   }
  
    deleteRow = (idx) =&gt; {
     const copy = [...this.state.rows]
     copy.splice(idx,1)
     this.setState ({
      rows:copy
    })
   }
  
  render() {
     return (
      &lt;div&gt;
       {
        this.state.rows.map ( (row,idx) =&gt; {
          return (
            &lt;Row 
            key = {idx} 
            value = { row.value } 
            onChange = { (e) =&gt; this.updateValue(e,idx) } 
            delete = { this.deleteRow.bind(this,idx) } /&gt;
          )
        })
      }
      &lt;button onClick = {this.addRow}&gt; Add &lt;/button&gt;
    &lt;/div&gt;
     )
   }
  }
  
   export default App;
  </code></pre>
  
  <p>And my row component looks like this:-</p>
  
  <pre><code>import React from 'react'
  
  const Row = ( props) =&gt; {
      return (
         &lt;div&gt;
          &lt;input value= { props.value } onChange={ props.onChange }&gt;&lt;/input&gt;
          &lt;select&gt;
              &lt;option&gt;&lt;/option&gt;
          &lt;/select&gt;
          &lt;select&gt;
              &lt;option&gt;&lt;/option&gt;
          &lt;/select&gt;
          &lt;button onClick = { props.deleteRow } &gt; Delete &lt;/button&gt;  
         &lt;/div&gt;
     )
   }
  
   export default Row
  </code></pre>
  
  <p>So the <code>deleteRow</code> method is the one that doesn't seem to work. can someone please correct what i am doing wrong and Also how am i supposed to assign the options value to the select dropdowns. Thank you.</p>