remove element in array with react, no working

Question

No working, handleRemoveNote function the App component:

  handleRemoveNote(id){

    let{ notes } = this.state;

    notes = notes.filter(function(note) {
        return note.noteId !== id;
    })

    for (var i = 0; i < notes.length; i++) {
      notes[i].noteId = i+1;
    }

    this.setState({ notes })
    console.log(notes)
  }

Component Note:

  handleRemove(noteId){
    this.props.removeNote(noteId);
  }

Call onClick

 <span
     onClick = {() => this.handleRemove(this.noteId)}
     >
     <i className="fas fa-trash-alt float-right"></i>
 </span>

Rendering of the notes in the App component:

      {
        this.state.notes.map(note =>{
        return(
          <Note
            removeNote = {this.handleRemoveNote}
            noteId = {note.noteId}
            noteContent= {note.noteContent}
            />
        )
        })
      }

Constructor of Note component:

  constructor(props){
    super(props);
    this.noteId = props.noteId;
    this.noteContent = props.noteContent;
  }

App Component: https://pastebin.com/VCrJBdXT
Note Component: https://pastebin.com/hDmPaGuZ

I do not understand why it does not work, it removes the last item from the list and not the one I want, I made a 'console.log (notes)' and it shows me the arrangement with the elements deleted correctly

Not a solution but remember to add the key parameter for each Note inside the map. I think the problem relies in this.noteId, shouldn't it be this.props.noteId (inside onClick)? — Alvaro
– Alvaro, Commented Nov 27, 2018 at 0:26
constructor(props){ super(props); this.noteId = props.noteId; this.noteContent = props.noteContent; } — Victor Nuñez
– Victor Nuñez, Commented Nov 27, 2018 at 0:42

Alex Tepliashin · Accepted Answer · 2018-11-27 03:38:52Z

1

here's a few problems in the code you provided by the links: 1. the key property must be given when iterating in map

this.state.notes.map(note =>
<Note
removeNote = {this.handleRemoveNote}
noteId = {note.noteId}
noteContent= {note.noteContent}
key={note.noteId}
/>)

and then it should be removed from Note render() method

you don't actually want to re-assign you keys after removal, must probably you will get those ids from the server, so you have to use them as keys. And also it's the main problem here

this way your new notes array won't contain the element with the key which is the index of your last element, so it thinks you want to remove the element with this key - the last element. Just remove that loop and everything should work fine

for (var i = 0; i < notes.length; i++) {
    notes[i].noteId = i+1;
}

edited Nov 27, 2018 at 3:38

answered Nov 27, 2018 at 3:30

Alex Tepliashin

613 bronze badges

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

2 Comments

Victor Nuñez Over a year ago

that reorder of keys is because when you delete a note for example I had note 1, note 2 and note 3 if you deleted note 2 and added a new one had two notes with the same key 3

Alex Tepliashin Over a year ago

then you might need to use something else as a key for your elements, you can't rely on the ids you will provide from ui, the ids used for keys must be unique, possible solutions: 1) you use some internal ids as keys and they will be unique for all the notes, you can use something like npmjs.com/package/shortid 2) don't enter ids from ui and assign them internally and be sure they are always unique + remove that re-ordering code.

Collectives™ on Stack Overflow

remove element in array with react, no working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related