How to figure out an array element with key in React js

Question

I am making something in the following picture:

I wrote the following code:

{ persons.map((person) => <li key = {person.id}> 
  <Person name={person.name} number={person.number}/> 
  <Button text={'Delete'} handler={deleteHandler} /> 
</li>) }

The problem I am facing is, How to make the button (deleteHandler) work and delete the contact associated with it?

What I think should be done -> find out the key associated (key in < li>) with the button and delete it from the array. But then How do I find the key of < li> associated with the button?

Note - I am using React hooks for state changes (NOT the classes), so, please suggest the answer accordingly.

Thanks

kooskoos · Accepted Answer · 2019-12-26 11:38:24Z

1

{ persons.map((person) => <li key = {person.id}> 
  <Person name={person.name} number={person.number}/> 
  <Button text={'Delete'} handler={() => deleteHandler(person.id)} /> 
</li>) }

In your handler you can filter your array using person.id

answered Dec 26, 2019 at 11:38

kooskoos

4,9391 gold badge17 silver badges31 bronze badges

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

Comments

akhtarvahid · Accepted Answer · 2019-12-26 11:39:56Z

1

You can pass particular id or object to delete inside that function

{ persons.map((person) => <li key = {person.id}> 
  <Person name={person.name} number={person.number}/> 
  <Button text={'Delete'} handler={() => deleteHandler(person.id)} /> 
</li>) }

Assuming that you have

const [persons, setPerson] = React.useState([......]);

const deleteHandler = item =>{
 let filtered  = persons.filter(person=> person.id!==item.id);
 setPerson(filtered)
}

answered Dec 26, 2019 at 11:39

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Comments

Ajith · Accepted Answer · 2019-12-26 11:42:10Z

1

First Add Persons to state data like

this.setState( {persons:persons});

Then you can use the below code for delete operation

deleteHandler = (person) => {
  this.setState( { persons :  this.state.persons.filter(function( obj ) {
    return obj.id !== person.id;
    })
  });
}


this.state.persons.map((person, index) => {

  return(
        <li key = {person.id}> 
        <Person name={person.name} number={person.number}/> 
        <Button text={'Delete'} handler={()=>{this.deleteHandler(person)}} /> 
        </li>
  )
})

answered Dec 26, 2019 at 11:42

Ajith

2,6784 gold badges21 silver badges43 bronze badges

Comments

Karthick B · Accepted Answer · 2019-12-26 12:51:57Z

1

You can either pass the key and check the key to find the index to delete an item or pass the index to deleteHandler() function directly from click handler

{ persons.map((person, i) => <li key = {person.id}> 
  <Person name={person.name} number={person.number}/> 
  <Button text={'Delete'} handler={deleteHandler(i)} /> 
</li>) }

the function should be

const deleteHandler = (index) => {
  persons.splice(index, 1);
}

edited Dec 26, 2019 at 12:51

answered Dec 26, 2019 at 11:49

Karthick B

1184 bronze badges

Collectives™ on Stack Overflow

How to figure out an array element with key in React js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related