CODEWITHSUNDEEP
javascriptreactjsfirebaseasynchronouscomponents
3stacks
3stacks

Reputation: 33

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

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();
      });
  };

Upvotes: 1

Views: 73

Answers (1)

sleepystar96
sleepystar96

Reputation: 806

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;

Upvotes: 2

Related Questions