CODEWITHSUNDEEP
javascripthtmlreactjs
jpj
jpj

Reputation: 83

Can't understand this behaviour

I have a simple notes app and delete isn't working properly, even though state is correctly updated. The state is being updated correctly as I can see on the console. But all the notes including and after that note that I click delete on are getting deleted on the DOM for some reason. For example if I have 3 notes ["hello","hi","hey"], if I delete the second note("hi"), the state shows the correct notes ["hello","hey"] but both "hi" and "hey" are deleted on the page not just "hi" like it was supposed to. I can't understand where I've gone wrong, so I'd like to correct it.

App.js:

handleDelete = (note_id) => {
    const id = 'display-' + note_id;
    console.log(id);
    document.getElementById(id).style.display = 'none';//remove element

    //delete the note and update state
    const newNotesList = this.state.notesList;
    newNotesList.splice(note_id,1);
    this.setState({
      notesList : newNotesList
    })
    console.log(this.state.notesList)
  }

Display.js:

render(){
    const notesList = this.props.notesList;
    const displayNotes = notesList.map( (note,note_id) =>
      <div id={ 'display-' + note_id } className="display">
      {/*some code*/}
      <button type="button" className="delete-button"
     onClick = { () => this.props.handleDelete(note_id) } > Delete </button>
      </div> );

    return <div>{displayNotes}</div>;
  }

Upvotes: 1

Views: 84

Answers (1)

Liu Lei
Liu Lei

Reputation: 1297

do like this

// don't mutation object

// App.js
handleDelete = (note_id) => {
    //delete the note and update state
    const newNotesList = this.state.notesList.filter((item, index)=> index !== note_id)
this.setState({
  notesList : newNotesList
})
  }

// Display.js
render(){
    const notesList = this.props.notesList;
    const displayNotes = notesList.map( (note,note_id) =>
      <div>
      {/*some code*/}
      <button type="button" className="delete-button"
     onClick = { () => this.props.handleDelete(note_id) } > Delete </button>
      </div> );

    return <div>{displayNotes}</div>;
  }

==== here is the reason ========

at first the state.note is ["hello","hi","hey"], in the function of handleDelete you delete "hi" and make the id of dispaly-1's display become to hidden, so when react render the state.note === ["hello","hey"] the element of "hey"'s id become dispaly-1 so "hey" will be hidden. you will only see "hello"

handleDelete = (note_id) => {
    // this.state.notesList === ["hello","hi","hey"]
    const id = 'display-' + note_id;
    console.log(id);
    // the problem is u hidden the next element

    // 1. newNotesList.splice(note_id,1);
    // 2. document.getElementById(id).style.display = 'none'
    // two methods choose one or you will hidden two elements


    document.getElementById(id).style.display = 'none';//remove element

    //delete the note and update state
    const newNotesList = this.state.notesList;
    
    newNotesList.splice(note_id,1);
    this.setState({
      notesList : newNotesList
    })
    console.log(this.state.notesList)

   // for example
   // the `this.state.notesList` new is ["hello","hey"]
  }


notesList.map( (note,note_id) =>
      // `note` is ["hello","hey"]  , u don't need hidden the `2rd` element
      //you have been delete 'hi' ` the id of `display-1`'s display ==='hidden' 
     // now "hey"'s id is `display-1`
      <div id={ 'display-' + note_id } className="display">
      {/*some code*/}
      <button type="button" className="delete-button"
     onClick = { () => this.props.handleDelete(note_id) } > Delete </button>
      </div> );
``

Upvotes: 1

Related Questions