display:none 和 visibility:hidden 都不起作用

Question

I cannot figure out why this is not working, so please help me figure it out.

Display.js:

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

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

App.js:

  handleEdit = (note_id) => {
    const id = 'note-' + note_id;
    document.getElementById(id).contentEditable = 'true';
  }

  handleDelete = (note_id) => {
    const id = 'note-' + note_id;
    document.getElementById(id).display = 'none';
  }

Answer 1

When you want to change an element css property, you need to access the style object first.

This is how you would get it:

  handleDelete = (note_id) => {
    const id = 'note-' + note_id;
    document.getElementById(id).style.display = 'none';
  }