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;

stackoverflow.com/questions/36326612/…

AL.Sharie
– AL.Sharie

2021-08-08 18:11:03 +00:00
Commented Aug 8, 2021 at 18:11 — AL.Sharie
– AL.Sharie, Commented Aug 8, 2021 at 18:11
i already tried it on my code i cant get it to work..

Floziko
– Floziko

2021-08-08 18:13:16 +00:00
Commented Aug 8, 2021 at 18:13 — Floziko
– Floziko, Commented Aug 8, 2021 at 18:13

Kritish Bhattarai · Accepted Answer · 2021-08-08 18:19:31Z

2

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>
                )
              })
           }

answered Aug 8, 2021 at 18:19

Kritish Bhattarai

1,68119 silver badges21 bronze badges

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

2 Comments

Floziko Over a year ago

i can not do it with event ?

Kritish Bhattarai Over a year ago

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

Shubham Dhumal · Accepted Answer · 2021-08-08 18:17:50Z

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 8, 2021 at 18:17

Shubham Dhumal

1751 silver badge10 bronze badges

1 Comment

Shubham Dhumal Over a year ago

try to console.log(item.name, event.target.value) and check any one of the are null

Collectives™ on Stack Overflow

Delete from array React

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related