Delete items onClick using ReactJS?

Question

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?

My App.js or my root component looks like this: -

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) => {
 const rows = [...this.state.rows];
 rows[idx].value = e.target.value;
 this.setState({
    rows,
 });
}

addRow = () => {
const rows = [...this.state.rows, {value:''}];
this.setState({
    rows,
    });
 }

  deleteRow = (idx) => {
   const copy = [...this.state.rows]
   copy.splice(idx,1)
   this.setState ({
    rows:copy
  })
 }

render() {
   return (
    <div>
     {
      this.state.rows.map ( (row,idx) => {
        return (
          <Row 
          key = {idx} 
          value = { row.value } 
          onChange = { (e) => this.updateValue(e,idx) } 
          delete = { this.deleteRow.bind(this,idx) } />
        )
      })
    }
    <button onClick = {this.addRow}> Add </button>
  </div>
   )
 }
}

 export default App;

And my row component looks like this:-

import React from 'react'

const Row = ( props) => {
    return (
       <div>
        <input value= { props.value } onChange={ props.onChange }></input>
        <select>
            <option></option>
        </select>
        <select>
            <option></option>
        </select>
        <button onClick = { props.deleteRow } > Delete </button>  
       </div>
   )
 }

 export default Row

So the deleteRow 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.

Answer 1

The prop you're passing to the component is delete, not deleteRow. So this line in your Row component:

<button onClick = { props.deleteRow } > Delete </button>  

Should be changed to:

<button onClick = { props.delete } > Delete </button>  

---

Or better yet, change the way you're passing the prop so it is actually called deleteRow. So you can change your App render function to:

render() {
   return (
    <div>
     {
      this.state.rows.map ( (row,idx) => {
        return (
          <Row 
          key = {idx} 
          value = { row.value } 
          onChange = { (e) => this.updateValue(e,idx) } 
          deleteRow = { this.deleteRow.bind(this,idx) } />
        )
      })
    }
      <button onClick = {this.addRow}> Add </button>
    </div>
   )
 }
}

---

Setting the options in the select tag:

First of all you'd need to pass the options as props to the Row component. So in your App render you can do:

render() {
   return (
    <div>
     {
      this.state.rows.map ( (row,idx) => {
        return (
          <Row 
          key = {idx} 
          value = { row.value } 
          options = { row.options }
          onChange = { (e) => this.updateValue(e,idx) } 
          deleteRow = { this.deleteRow.bind(this,idx) } />
        )
      })
     }
       <button onClick = {this.addRow}> Add </button>
     </div>
   )
 }
}

Then, in your Row component, you use the new options prop:

const Row = ( props) => {
    let options = props.options.map(opt => <option key={opt}>{opt}</option>);

    return (
       <div>
        <input value= { props.value } onChange={ props.onChange }></input>
        <select>
            {options}
        </select>
        <button onClick = { props.deleteRow } > Delete </button>  
       </div>
   )
 }