I can't figure out why my component does not rendered with the updated state. Even though, the state is updated and reflected in the database

Question

So I'm working on a simple CRUD note app. I ran into this one problem when my component goes into edit mode and when editing is done. The PUT request successfully update the content in the db and the edit mode component will return back to a normal note. Here are the related code:

constructor(props) {
    super(props);

    this.state = {
      notes: [],
      id: null,
      title: "",
      content: "",
      toEdit: null
    }

    this.handleTitleChange = this.handleTitleChange.bind(this);
    this.handleContentChange = this.handleContentChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.deleteNote = this.deleteNote.bind(this);
    this.handleEditSubmit = this.handleEditSubmit.bind(this);
  }
  handleContentChange = (event) => {
    this.setState({ content: event.target.value});
  }

Here's the update function:

// Handle new content edit
  handleEditSubmit = (noteId) => {
    console.log(noteId)
    axios.put('http://localhost:3000/notes/' + noteId, 
    {
      content: this.state.content
    })
     .then(res => {
      // Rerender the editNote into a normal note.
      this.setState({ 
      toEdit: null,
     }, () => {console.log(this.state.content, this.state.toEdit)}) 
      console.log(res);
    })
     .catch(err => {
      console.log(err);
      this.setState({ toEdit: null })
     })
  }

Lastly, render normal note component when toEdit is null and render edit-mode component when toEdit===index:

{this.state.notes.map((output, index) => {
            if (this.state.toEdit === index) {
              return (
                <div key={index} className="note">
                  <div className="title-container"><h4>{output.title}</h4></div>
                    <textarea 
                      className="textarea"
                      type="text" 
                      name="edit-content" 
                      defaultValue={output.content} 
                      onChange={this.handleContentChange} 
                    />
                    <Button bsStyle="danger" type="button" onClick={this.handleCancel} >Cancel</Button>
                    <Button bsStyle="primary" type="button" onClick={this.handleEditSubmit.bind(this, output.id)} >Done</Button>
                </div>
              )
            } else {
              return (
                <div key={index} className="note">
                  <div className="title-container"><h4>{output.title}</h4></div>
                    <p>{output.content}</p>
                    <Button bsStyle="danger" onClick={this.deleteNote.bind(this, index, output.id)}>Delete</Button>
                    <Button bsStyle="primary" onClick={this.edit.bind(this, index)} >Edit</Button>
                </div>
              )
            }
          }

The edited text won't show after PUT request and after re-render. Have to refresh page to get the updated note. Have a look at the gif: https://giphy.com/gifs/dn15rkILhjMyvVl8CX/fullscreen

Answer 1

You are not changing anything in notes[], as you are using {this.state.notes.map((output, index) => { to render notes.You should updated the notes[] entity after axios done. You can do something like this

 handleEditSubmit = (noteId) => {
    console.log(noteId)
    axios.put('http://localhost:3000/notes/' + noteId, 
    {
      content: this.state.content
    })
     .then(res => {
      // Rerender the editNote into a normal note.
      this.setState({ 
      toEdit: null,
      notes:res.notes // this is changed part
     }, () => {console.log(this.state.content, this.state.toEdit)}) 
      console.log(res);
    })
     .catch(err => {
      console.log(err);
      this.setState({ toEdit: null })
     })
  }

note: notes:res.notes // this is changed part changed

so, after this change this.state.notes will have new updates and you can easily bind that.