Home > Software engineering >  Reset states of a component when it is closed
Reset states of a component when it is closed

Time:11-30

I have created a MERN application in which on dashboard when a button is clicked a modal box opens which contains some inputs and some options to be selected which are handled using react state hooks. I want when I close modal box the value in it should be reset to default one and when i reopen it all the options should reset to default value Here is my modal box code

import React, { useState, useContext, useEffect } from "react";
import { UserContext } from "./UserContext";
function SplitModal({
  setsplitmodal,
  cost,
  list,
  listobj,
  setlistobj,
  equal,
  setEqual,
  payer,
  setPayer,
  part,
  setPart,
  setM,
}) {
  const [method, setMethod] = useState(true);
  const [split, setsplit] = useState(true);
  const [owe, setowe] = useState(true);
  const [owes, setowes] = useState(true);
  const [click, setClick] = useState(false);
  const [amount, setAmount] = useState();

  const [total, setTotal] = useState(0);
  const { user, userfriend } = useContext(UserContext);
  console.log(user, "user hu darta koni", user.name);
  console.log(listobj);
  useEffect(() => {
    if (equal === "unequally") {
      const _listobj = { ...listobj };
      Object.keys(listobj).map((f) => {
        _listobj[f] = 0;
      });
      setlistobj(_listobj);
      document.getElementById("InputId").value = "";
      console.log(_listobj, "listobjsehu");
    }
  }, [list, cost]);

  const func1 = () => {
    setM(false);
    setEqual("unequally");
    setMethod(false);
    const _list = { ...listobj };
    _list[list[0]] = -cost;
    _list[list[1]] = cost;
    setlistobj(_list);
    setowe(false);
    setowes(true);
    setPayer(list[1]);
    setPart(`(You owe ${list[1]}${cost})`);
  };
  const func2 = () => {
    setM(false);
    setEqual("unequally");
    setMethod(false);
    const _list = { ...listobj };
    const b = _list[list[0]];
    _list[list[0]] =  cost;
    _list[list[1]] = -cost;
    setlistobj(_list);
    setPayer(list[0]);
    setowe(true);
    setowes(false);
    setPart(`(${list[1]} owes you ₹${cost})`);
    // console.log(owe, owes, click);
  };
  const distriequal = () => {
    setM(true);
    // setowe(true);
    // setowes(true);

    setPart(`(₹${(cost / list.length).toFixed(2)}/person)`);
    setMethod(true);
    setEqual("equally");
    setTotal(0);
    const _list = { ...listobj };
    list.map((f) => {
      if (f === payer) {
        _list[f] = (cost - cost / list.length).toFixed(2);
      } else {
        _list[f] = -(cost / list.length).toFixed(2);
      }
      setlistobj(_list);
    });
  };
  // console.log(listobj.exp[list[1]], listobj);
  const distriamount = (e, i) => {
    if (e.key === "Backspace") setM(true);
    if (parseInt(e.target.value) > cost) setAmount("err");
    else setAmount("");
    //  console.log( a.replace(a,e.targetvalue));

    const _list = { ...listobj };

    if (list[i] === payer) {
      // _list[list[i]] = e.target.value;
      // setOwner(e.target.value);

      _list[payer] = parseInt(cost - e.target.value);
    } else {
      _list[list[i]] = -e.target.value;
    }
    setlistobj(_list);
    if (listobj[user.name] > 0)
      setPart(`You get back ₹${Math.abs(_list[user.name])}`);
    else if (listobj[user.name] < 0)
      setPart(`You owe ₹${Math.abs(_list[user.name])}`);
    else setPart(`You owe nothing`);
  };
  // useEffect(() => {
  //   Object.keys(listobj).map((f) => {
  //     if (f === user.name) {
  //       console.log("nmnm");
  //       setTotal(total   owner);
  //     } else setTotal(total   Math.abs(listobj[f]));
  //   });
  // }, [listobj]);

  console.log(listobj, list);

  return (
    <div>
      <div className="splitmodal">
        <div
          style={{
            backgroundColor: "#1cc29f",
            border: "1px solid #eeeeee",
            padding: "5px",
            display: "flex",
            borderRadius: "10px 10px 0px 0px",
            color: "white",
          }}
        >
          <h5 style={{ marginLeft: "100px" }}>Choose Payer</h5>
          <button
            style={{ position: "absolute", right: "10px" }}
            onClick={() => {
              setsplitmodal(false);
            }}
          >
            <i  />
          </button>
        </div>
        {list.length === 2 ? (
          <div className="bg-white splitmodal-main1">
            <button
              onClick={() => {
                setMethod(true);
                setM(true);
                setClick();
                setowe(true);
                setowes(true);
              }}
            >
              Split the expense
            </button>
            <button
              onClick={() => {
                {
                  setClick("owe");
                  return owe ? func1() : null;
                }
              }}
              className={click === "owe" ? "click" : null}
            >
              You owe {list[1]} ₹{cost}
            </button>
            <button
              className="mb-2"
              onClick={() => {
                {
                  setClick("owes");
                  return owes ? func2() : null;
                }
              }}
              className={click === "owes" ? "click" : null}
            >
              {list[1]} owes you ₹{cost}
            </button>
          </div>
        ) : null}
        {method ? (
          <div className="splitmodal-main2">
            <hr style={{ margin: "10px" }} />
            <div className="flex  justify-content-center">
              <button
                style={{
                  border: "1px solid #ccc",
                  borderRadius: "5px 0px 0px 5px",
                }}
                className={equal === "equally" ? "select" : "deselect"}
                onClick={() => {
                  distriequal();
                }}
              >
                Split equally
              </button>
              <button
                style={{
                  border: "1px solid #ccc",
                  borderRadius: "0px 5px 5px 0px",
                }}
                className={equal === "unequally" ? "select" : "deselect"}
                onClick={() => {
                  setEqual("unequally");
                }}
              >
                Split by amounts
              </button>
            </div>
            {equal === "equally" ? (
              <div>
                <div className="splitmodal-main3">
                  <h5 className="mt-2 ml-3">Split equally</h5>
                  <ul
                    style={{
                      display: "flex",
                      flexDirection: "column",
                      marginLeft: "10px",
                    }}
                  >
                    {list.map((f) => {
                      return (
                        <li className="flex align-items-center m-2">
                          <img
                            src="https://s3.amazonaws.com/splitwise/uploads/user/default_avatars/avatar-grey47-50px.png"
                            alt=""
                          />
                          <span className="ml-2 font-bold">{f}</span>
                          <span className="absolute right-10 ">
                            ₹{cost ? (cost / list.length).toFixed(2) : 0.0}
                          </span>
                        </li>
                      );
                    })}
                  </ul>
                </div>
              </div>
            ) : (
              <div>
                <div className="splitmodal-main3">
                  <h5 className="mt-2 ml-3">Split by amounts</h5>
                  <ul
                    style={{
                      display: "flex",
                      flexDirection: "column",
                      marginLeft: "10px",
                    }}
                  >
                    {list.map((f, i) => {
                      return (
                        <li key={i} className="flex align-items-center m-2">
                          <img
                            src="https://s3.amazonaws.com/splitwise/uploads/user/default_avatars/avatar-grey47-50px.png"
                            alt=""
                          />
                          <span className="ml-2 font-bold">{f}</span>
                          <span className="absolute right-5 ">
                            <span
                              style={{
                                backgroundColor: "#EEEEEE",
                                paddingLeft: "14px",
                                paddingRight: "14px",
                                border: "1px solid #ccc",
                                borderRadius: "4px 0px 0px 4px",
                              }}
                            >
                              ₹
                            </span>
                            <input
                              type="number"
                              // value={Math.abs(listobj[f])}
                              id="InputId"
                              style={{
                                width: "60px",
                                border: "1px solid #ccc",
                                borderRadius: "0px 4px 4px 0px",
                                height: "23.33px",
                              }}
                              className={
                                amount === "err" ? "text-red-500" : null
                              }
                              onChange={(e) => {
                                distriamount(e, i);
                              }}
                            />
                          </span>
                        </li>
                      );
                    })}
                  </ul>
                </div>
                {/* <div className="mt-2 ml-3">
                  <h5>Total:</h5>
                  <span className="absolute right-10 bottom-0 ">₹{total}</span>
                </div> */}
              </div>
            )}
          </div>
        ) : null}
      </div>
    </div>
  );
}

export default SplitModal;


Please help me solving this

CodePudding user response:

As a workaround you can write a new useEffect() that reset all the value at the loading of your component, something like :

useEffect(() => {
    setMethod(true);
    setsplit(true);
    setowe(true);
    setowes(true);
    setClick(false);
    setAmount();
    setTotal(0);
}, []);

CodePudding user response:

We don't actually need a separate effect to perform the cleanup. useEffect is designed to keep it together.

Learn more on: https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup

useEffect(() => {
// your other codes

return function reset() {
    setMethod(true);
    setsplit(true);
    setowe(true);
    setowes(true);
    setClick(false);
    setAmount(0);
    setTotal(0);
}
}, []);
  • Related