reactjs - How to make my react component rerender when I submit a form into firestore

Question

Please I am trying to insert data into my firestore and also want the data that I stored to immediately appear on my screen after submitting. The problem I am currently having is that once I insert the data into firestore, I have to reload the component before seeing it on my screen. Here is my code below, what am I Doing wrongly.

function CreateGroup({ currentUser }) {
  const [name, setName] = useState("");
  const [group, setGroup] = useState([]);

  const handleChange = (e) => {
    const { value, name } = e.target;

    setName({
      [name]: value,
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    createGroup(currentUser, name.name);
  };


  let id = currentUser ? currentUser.id : "";
  useEffect(() => {
    const fetchData = () => {
      if (id) {
        firestore
          .collection("users")
          .doc(id)
          .collection("group")
          .get()
          .then(function (snapshot) {
            snapshot.forEach(function (doc) {
            //   console.log(doc.id, " => ", doc.data());
              setGroup({
                id: doc.id,
                ...doc.data(),
              });
            });
          });
      }
    };
    fetchData();
  }, [id]);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="exampleInputTitle">Group Name</label>
          <input
            type="text"
            className="form-control"
            name="name"
            id="name"
            aria-describedby="TitleHelp"
            onChange={handleChange}
          />
        </div>

        <button type="submit" className="btn btn-primary">
          Add group{" "}
        </button>
      </form>
      <div>
        <div key={group.id}>
          {group.name} {group.admin}
        </div>
      </div>
    </div>
  );
}

question from:https://stackoverflow.com/questions/65931759/how-to-make-my-react-component-rerender-when-i-submit-a-form-into-firestore

Answer 1

I would say, create a local state, say

 const [submited, setSubmited] = useState(true);

then on submit, change the state to true, and in your useEffect use "submitted" state also as a dependency along with id. OnHandleChange set "submitted" to false so we can submit again.

if (id) {}

becomes

if (id && submitted) {}

in the UseEffect.

function CreateGroup({ currentUser }) {
  const [name, setName] = useState("");
  const [group, setGroup] = useState([]);
const [submited, setSubmited] = useState(true);

  const handleChange = (e) => {
    const { value, name } = e.target;

    setName({
      [name]: value,
    });
setSubmited(false);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    createGroup(currentUser, name.name);
setSubmited(true);
  };


  let id = currentUser ? currentUser.id : "";
  useEffect(() => {
    const fetchData = () => {
      if (id && submitted) {
        firestore
          .collection("users")
          .doc(id)
          .collection("group")
          .get()
          .then(function (snapshot) {
            snapshot.forEach(function (doc) {
            //   console.log(doc.id, " => ", doc.data());
              setGroup({
                id: doc.id,
                ...doc.data(),
              });
            });
          });
      }
    };
    fetchData();
  }, [id, submitted]);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="exampleInputTitle">Group Name</label>
          <input
            type="text"
            className="form-control"
            name="name"
            id="name"
            aria-describedby="TitleHelp"
            onChange={handleChange}
          />
        </div>

        <button type="submit" className="btn btn-primary">
          Add group{" "}
        </button>
      </form>
      <div>
        <div key={group.id}>
          {group.name} {group.admin}
        </div>
      </div>
    </div>
  );
}