Multiple submissions in one Textfield overrides the previous value that was saved

Question

I have this form with multiple checkboxes and below it, I also have the others where the user can enter any value. The problem is that if I'll enter a value for the 2nd time, it will remove the previous value entered by the user.

Assuming that I've entered books for my first submit. Now, I want to submit another value for the others again, but this time it will be movies. I want to save in the firestore the both of these values; books and movies. The problem is that if I'll submit movies, this will override the previous one books, meaning it will replace books. How can I avoid that and at the same time display the multiple values entered by the user in the field others?

Below are the codes:

const sample = (props) => {
  const [others, setOthers] = useState("");
 

  const handleSubmit = (e) => {
    e.preventDefault();
    try {
      const user = firestore.collection("users").doc(id);
      const ref = user.set(
        {
          1: {
            choices,
            others
          }
        },
        { merge: true }
      );
      console.log(" saved");
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <FormGroup>
        //codes for the checkboxes here

          <TextField
            type="text"
            label="Others:"
            value={others}
            onChange={(e) => setOthers(e.target.value)}
            multiline
          />
        </FormGroup>
        <button type="submit">Submit</button>

        <br />
      </form>
    </>
  );
};

export default sample;

Strid3r21 · Accepted Answer · 2021-12-29T01:06:49.937

im going to preface this with im not familiar with react, but i do mess around with firestore alot. so the syntax maybe different for you.

but the first thing i notice is that you're using const ref = user.set to make the document. this is fine for first time creating a document, but if you use '.set' on an existing document it will override all the data in that document with whatever you're attempting to update it with.

you should use const ref = user.update to update fields in the document.

the 2nd bit is lets say you want to update the 'others' field. it would still override the data in that field even if you use '.update'. update is doing just that, its updating the field in question with whatever you're trying to update it with. what you want to do is add to it.

so your 'others' field needs to be an array and in order to add new values into it without overriding the previous data you need to use an arrayUnion.

 const handleSubmit = (e) => {
e.preventDefault();
try {
  const user = firestore.collection("users").doc(id);
  const ref = user.update(
    {
      1: {
        choices,
        others: firebase.firestore.FieldValue.arrayUnion(others),
      }
    },
    { merge: true }
  );
  console.log(" saved");
} catch (error) {
  console.log(error);
}
};

now i dont know how imports work in react but in VUEjs you'd need to import import firebase from "firebase/compat/app"; in the script tag in order to use the that firebase feature.

if you want to remove an item from that others array then use.

 const handleSubmit = (e) => {
    e.preventDefault();
    try {
      const user = firestore.collection("users").doc(id);
      const ref = user.update(
        {
          1: {
            choices,
            others: firebase.firestore.FieldValue.arrayRemove(item),  //item = whatever it is you're trying to remove.
          }
        },
        { merge: true }
      );
      console.log(" saved");
    } catch (error) {
      console.log(error);
    }
  };

score 0 · Answer 2 · answered Dec 28 '21 at 08:54

From the React docs, this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state. To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument.

prevState is a name to the argument passed to setState callback function. What it holds is the value of state before the setState was triggered by React. So if multiple setState calls are updating the same state, batching setState calls may lead to incorrect state being set. Consider an example.

Your 'others' field needs to be an array and in order to add new values into it without overriding the previous data you need to use prevState. If you don’t want to use setState you can use

prevState in useState React Hook with Javascript spread operator to concatenate the previous values with current values in array

Something like this.

Just providing a React perspective to the question. – Priyashree Bhadra Dec 28 '21 at 08:54 — Priyashree Bhadra, Dec 28 '21 at 08:54

Multiple submissions in one Textfield overrides the previous value that was saved

2 Answers2