Delete from array React

Question

i am trying to delete object from my array when i clicking on one of the first name in the table but i getting error, i know the problem is with the function delete but i dont sure what. or maybe the problen is with my onClick in the but i dont think so.

last question, i want to add button when i click on him the array come back to the original array,without all the names i added with thee Add button.

can you help me with that?

import logo from './logo.svg';
import './App.css';
import React from "react"

class App extends React.Component {

  state = {
    columns : ["First Name","Last Name","Age"],
    inputName : "",
    inputLastName : "",
    inputAge : "",
    students: [
      {
        name : "lala",
        lastName : "abc",
        age: 21
      },
      {
        name : "lolo",
        lastName : "efg",
        age: 21
      },
      {
        name : "lrlr",
        lastName : "aaaa",
        age: 21
      }
    ],

  }

  changeName =(event) =>{
    this.setState({
      inputName:event.target.value
    })
  }

  changeLast =(event) =>{
    this.setState({
      inputLastName:event.target.value
    })
  }

  changeAge =(event) =>{
    this.setState({
      inputAge:event.target.value
    })
  }

  addColum = (event) => {
    const newArray =this.state.students;
    const newStudents={
      name:this.state.inputName,
          lastName:this.state.inputLastName,
          age:this.state.inputAge
    }
    newArray.push(newStudents);
    this.setState({
      students:newArray
    })
  }

  delete = (event) =>{
    this.setState({students: this.state.students.filter(item => {
       return(item !==event.target.value )
      })});
  }



  render() {

    return(
        <div class="App">
          <div style={{color:"blue"}}><h1><u>Students Table</u></h1></div>
          <table class="App" style={{border:"1px solid black"}}>
            <tr >
              {
                this.state.columns.map(column => {
                  return(
                      <th>{column}</th>
                  )
                })
              }
            </tr>
            {
              this.state.students.map(student =>{
                return(
                    <tr>
                      <div onClick={this.delete}><td>{student.name}</td> </div>
                      <td>{student.lastName}</td>
                      <td>{student.age}</td>
                    </tr>
                )
              })
            }
          </table>
          <br/>
          <div>First Name:<input value={this.state.inputName} onChange={this.changeName}></input> </div>
          <div>Last Name:<input value={this.state.inputLastName} onChange={this.changeLast}></input> </div>
          <div>Age:<input value={this.state.inputAge} onChange={this.changeAge}></input> </div>
          <br/>
          <div><button style={{backgroundColor:"salmon"}} onClick={this.addColum}>Add</button></div>
        </div>

  )
    }
}



export default App;

https://stackoverflow.com/questions/36326612/how-to-delete-an-item-from-state-array — AL.Sharie, Aug 08 '21 at 18:11

score 2 · Accepted Answer · answered Aug 08 '21 at 18:19

The event.target.value on your delete function will always be undefined.
If you want to pass student name to delete function, you can also do it like this

  delete = (studentName) => {
    this.setState({students: this.state.students.filter(item => {
       return(item.name !== studentName )
      })});
  }

and for the function call

          {
              this.state.students.map(student =>{
                return(
                    <tr>
                      <div onClick={()=>this.delete(student.name)}><td>{student.name}</td></div>
                      <td>{student.lastName}</td>
                      <td>{student.age}</td>
                    </tr>
                )
              })
           }

for the purpose of your app, you can make use of `e.target.textContent` or maybe `e.target.innerHTML` also works, but not a good way i would say for a standard react app — Kritish Bhattarai, Aug 08 '21 at 18:32

score 1 · Answer 2 · answered Aug 08 '21 at 18:17

1

in your delete function, you comparing an object with a value instead, use

delete = (event) =>{
    this.setState({students: this.state.students.filter(item => {
       return(**item.name** !==event.target.value )
      })});
  }

answered Aug 08 '21 at 18:17

Shubham Dhumal

125
1
9

try to console.log(item.name, event.target.value) and check any one of the are null – Shubham Dhumal Aug 08 '21 at 18:29

Delete from array React

2 Answers2