How do I fix the error about changing controlled input to uncontrolled in my code?

Question

i have this div:

    <div>
      <MyHeroes>
        {myHeroesList.map((hero) => (
          <div key={uuid()} className="hero" onClick={handleName}>
            {hero}
            <div
              className="close"
              onClick={() => {
                handleRemoveHero(hero);
              }}
            >
              <CloseRoundedIcon />
            </div>
          </div>
        ))}
      </MyHeroes>
    </div>

and I have this error popping up when the handleRemoveHero(hero) function is running. It's basically deleting documents from Firebase.

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component

Function itself:

 const handleRemoveHero = (hero) => {
    db.collection("swapi")
      .where("user", "==", user?.displayName)
      .where("liked", "==", hero)
      .get()
      .then((data) => {
        const id = data.docs[0].id;
        db.collection("swapi").doc(id).delete();
      });
  };

Is myHeroesList being updated via a firebase change listener? — sleepystar96
yes it is updated in useEffect with setting setMyHeroesList with map — 3stacks
useEffect(() => { user && db .collection("swapi") .where("user", "==", user?.displayName) .onSnapshot((s) => setMyHeroesList(s.docs.map((d) => d.data().liked))); }, [user]); — 3stacks
I don't see anything that would cause the error you're getting. Besides, you don't really have any input fields in this code. are you certain you're looking at the right lines of code? This error usually appears when you try to change the value of a textbox or input field outside the state. — sleepystar96

sleepystar96 sleepystar96 · Accepted Answer · 2021-02-01T19:43:23

For people with similar problems in the future:

This warning usually appears when the value of textboxes or inputs is changed outside of state or with a non-string value such as undefined.

Set a default value on input targets such as const value = e.target.value || ""; or the destructured syntax: const {target: {value = ""} = {}} = e;

How do I fix the error about changing controlled input to uncontrolled in my code?

1 Answers