Deleting elements onClick in ReactJS?

Question

I have a Row Component that i am importing into my App.js component and apparently i but the delete function doesn't seem to be deleting the correct row. Even if i delete the second one, it deletes the last one first. So basically if i click delete on second row, it should delete the second one not the third etc.

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:'', options: [1,2,3,4,5}];
 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:-

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.delete} > Delete </button>  
   </div>
  )
}

export default Row

I asked a similar question yesterday link but didn't realize at the time that the items weren't being deleted from the right position?

Your example actually seems to be working properly for me. I commented out the options rendering in your Row component, but that's a different issue than deleting the rows. — kennyvh
– kennyvh, Commented Jan 27, 2020 at 18:04
It works for me too. Fixed several syntactic errors and it ran correctly. — technophyle
– technophyle, Commented Jan 27, 2020 at 18:15

akhtarvahid · Accepted Answer · 2020-01-27 18:16:38Z

1

Try this

deleteRow = (item) => {
 let filtered = this.state.rows.filter(row=>row.value!==item.value);
 this.setState ({
 rows: filtered
  })
}

pass row to your delete function

    <Row 
      key = {idx} 
      value = { row.value } 
      onChange = { (e) => this.updateValue(e,idx) } 
      delete = {()=>this.deleteRow(row) } />
       )

if every row(object) is having unique id then use that id instead of value like-

 let filtered = this.state.rows.filter(row=>row.id!==item.id);

edited Jan 27, 2020 at 18:16

answered Jan 27, 2020 at 17:55

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

akhtarvahid Over a year ago

@Somethingwhatever check now by changing both mentioned code

kennyvh Over a year ago

if multiple rows shared the same value, this would delete extra rows

Somethingwhatever Over a year ago

@khuynh what would you suggest then? because my code doesn't seem to be doing what is expected :|

pethel Over a year ago

This is bad practise. new state should not old state like that. Then you should use function for setting state

kennyvh Over a year ago

I agree this is better practice than splicing the states (given the rows have a unique id to properly filter on). However, I believe it is slightly better practice to use the prevProps argument with setState. This guarantees that the state will be up to date.

|

Collectives™ on Stack Overflow

Deleting elements onClick in ReactJS?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related