How to show submitted data in React immediately, without refreshing the page?

Question

I'm building a simple note-taking app and I'm trying to add new note at the end of the list of notes, and then see the added note immediately. Unfortunately I'm only able to do it by refreshing the page. Is there an easier way?

I know that changing state would usually help, but I have two separate components and I don't know how to connect them in any way.

So in the NewNoteForm component I have this submit action:

 doSubmit = async () => {
    await saveNote(this.state.data);

  };

And then in the main component I simply pass the NewNoteForm component.

Here's the whole NewNoteForm component:

import React from "react";
import Joi from "joi-browser";
import Form from "./common/form";
import { getNote, saveNote } from "../services/noteService";
import { getFolders } from "../services/folderService";

class NewNoteForm extends Form {
  //extends Form to get validation and handling
  state = {
    data: {
      title: "default title",
      content: "jasjdhajhdjshdjahjahdjh",
      folderId: "5d6131ad65ee332060bfd9ea"
    },
    folders: [],
    errors: {}
  };

  schema = {
    _id: Joi.string(),
    title: Joi.string().label("Title"),
    content: Joi.string()
      .required()
      .label("Note"),
    folderId: Joi.string()
      .required()
      .label("Folder")
  };

  async populateFolders() {
    const { data: folders } = await getFolders();
    this.setState({ folders });
  }

  async populateNote() {
    try {
      const noteId = this.props.match.params.id;
      if (noteId === "new") return;

      const { data: note } = await getNote(noteId);
      this.setState({ data: this.mapToViewModel(note) });
    } catch (ex) {
      if (ex.response && ex.response.status === 404)
        this.props.history.replace("/not-found");
    }
  }

  async componentDidMount() {
    await this.populateFolders();
    await this.populateNote();
  }

  mapToViewModel(note) {
    return {
      _id: note._id,
      title: note.title,
      content: note.content,
      folderId: note.folder._id
    };
  }

  scrollToBottom = () => {
    this.messagesEnd.scrollIntoView({ behavior: "smooth" });
  }

  doSubmit = async () => {
    await saveNote(this.state.data);

  };

  render() {
    return (
      <div>
        <h1>Add new note</h1>
        <form onSubmit={this.handleSubmit}>
          {this.renderSelect("folderId", "Folder", this.state.folders)}
          {this.renderInput("title", "Title")}
          {this.renderInput("content", "Content")}
          {this.renderButton("Add")}
        </form>
      </div>
    );
  }
}

export default NewNoteForm;

And here's the whole main component:

import React, { Component } from "react";
import { getNotes, deleteNote } from "../services/noteService";
import ListGroup from "./common/listGroup";
import { getFolders } from "../services/folderService";
import { toast } from "react-toastify";
import SingleNote from "./singleNote";
import NewNoteForm from "./newNoteForm";

class Notes extends Component {
  state = {
    notes: [], //I initialize them here so they are not undefined while componentDidMount is rendering them, otherwise I'd get a runtime error
    folders: [],
    selectedFolder: null
  };

  async componentDidMount() {
    const { data } = await getFolders();
    const folders = [{ _id: "", name: "All notes" }, ...data];

    const { data: notes } = await getNotes();
    this.setState({ notes, folders });
  }

  handleDelete = async note => {
    const originalNotes = this.state.notes;
    const notes = originalNotes.filter(n => n._id !== note._id);
    this.setState({ notes }); 

    try {
      await deleteNote(note._id);
    } catch (ex) {
      if (ex.response && ex.response.status === 404)
        toast.error("This note has already been deleted.");

      this.setState({ notes: originalNotes });
    }
  };

  handleFolderSelect = folder => {
    this.setState({ selectedFolder: folder }); //here I say that this is a selected folder
  };

  render() {
    const { selectedFolder, notes } = this.state;

    const filteredNotes =
      selectedFolder && selectedFolder._id //if the selected folder is truthy I get all the notes with this folder id, otherwise I get all the notes
        ? notes.filter(n => n.folder._id === selectedFolder._id)
        : notes;

    return (
      <div className="row m-0">
        <div className="col-3">
          <ListGroup
            items={this.state.folders}
            selectedItem={this.state.selectedFolder} //here I say that this is a selected folder
            onItemSelect={this.handleFolderSelect}
          />
        </div>
        <div className="col">
          <SingleNote
            filteredNotes={filteredNotes}
            onDelete={this.handleDelete}
          />
          <NewNoteForm />
        </div>
      </div>
    );
  }
}

export default Notes;

How can I connect these two components so that the data shows smoothly after submitting?

Answer 1

You can use a callback-like pattern to communicate between a child component and its parent (which is the 3rd strategy in @FrankerZ's link) src: https://medium.com/@thejasonfile/callback-functions-in-react-e822ebede766)

Essentially you pass in a function into the child component (in the main/parent component = "Notes": <NewNoteForm onNewNoteCreated={this.onNewNoteCreated} /> where onNewNoteCreated can accept something like the new note (raw data or the response from the service) as a parameter and saves it into the parent's local state which is in turn consumed by any interested child components, i.e. ListGroup).

Sample onNewNoteCreated implementation:

onNewNoteCreated = (newNote) => {
  this.setState({
    notes: [...this.state.notes, newNote],
  });
}

Sample use in NewNoteForm component:

doSubmit/handleSubmit = async (event) => {
  event.preventDefault();
  event.stopPropagation();
  const newNote = await saveNote(this.state.data);
  this.props.onNewNoteCreated(newNote);
}

You probably want to stop the refresh of the page on form submit with event.preventDefault() and event.stopPropagation() inside your submit handler (What's the difference between event.stopPropagation and event.preventDefault?).