how to reset dialog in react after close

Question

The code below I have provided , one example opens the dialog. And the dialog has add functionality which is the addEmail where in you can add multiple fields which is inside the dialog.

I wanna know is that when I close the dialog using the onClick={handleClose} it should reset the dialog, fields that I added should not show after I close since I did not save it.

So when I click cancel it should reset the state.

Thanks for any idea.

for example here I added fields when I close this and open again these field should not show cause it should reset when I close.

#interface.ts

export type EditPropertiesProps = {
  open: boolean;
  handleClose: () => void;
  selectedRow: IRegional
};

#Code snippet - main page --- this calls and opens the dialog

 const handleClose = () => {
    console.log('here')
    setOpen(false);
  };

#EditProperties ts code

export const RegionalListData: IRegionalList[] = [
  {
    id: 4,
    name: "Associate Director of Construction Ops",
    column: "associateDirectorofConstructionOps",
    emails: [
      {
        emailAddress: "associateDir@gmail.com",
        firstName: "Associate",
        lastName: "Director",
        id: Math.floor(Math.random() * 999),
        fetching: false,
      },
    ],
  },
  {
    id: 5,
    name: "CAM Manager",
    column: "camManager",
    emails: [
      {
        emailAddress: "associateDir@gmail.com",
        firstName: "Associate",
        lastName: "Director",
        id: Math.floor(Math.random() * 999),
        fetching: false,
      },
    ],
  },
  {
    id: 6,
    name: "CAO-Chief Administrative Officer",
    column: "caoChiefAdministrativeOfficer",
    emails: [
      {
        emailAddress: "associateDir@gmail.com",
        firstName: "Associate",
        lastName: "Director",
        id: Math.floor(Math.random() * 999),
        fetching: false,
      },
    ],
  },
];
type InitialReqPaylod = {
  accountId: number;
  regionalRoleUserDto: IRegional;
};
type IData = {
  regionName: string;
  marketName: string;
  subRegionName: string;
};
type IEmail = {
  emailAddress: string;
  firstName: string;
  id: number;
  lastName: string;
};
const EditProperties: FC = ({
  open,
  handleClose,
  selectedRow,
}) => {
  const dispatch = useAppDispatch();
  const [isEmailOpen, setOpenEmail] = useState(false);
  const [fetching, setFetching] = useState(false);
  const [RegionalList, setRegionalList] = useState(
    RegionalListData
  );
  const [data, setData] = useState({
    regionName: "",
    marketName: "",
    subRegionName: "",
  });
  const [regionalId, setRegionalId] = useState(null);
  const [emailCurrentIndex, setEmailCurrentIndex] = useState(
    null
  );
  const [selectedEmailId, setSelectedEmailId] = useState(null);
  const { isSuccess } = useAppSelector((state) => state.yardUser);
  const { isSaveSuccess } = useAppSelector((state) => state.region);
  const email = useAppSelector((state) => state.yardUser);
  const [emailOptions, setEmailOptions] = useState([]);

  const emailList = email.data ? email.data.data : [];



  useEffect(() => {
    if (selectedRow) {
      setData({
        regionName: selectedRow["regionName"],
        marketName: selectedRow["marketName"],
        subRegionName: selectedRow["subRegionName"],
      });

      let regional = [...RegionalList];
      for (const k in selectedRow) {
        regional.map((prop: IRegionalList) => {
          if (prop.column === k) {
            prop.emails = selectedRow[k] ? selectedRow[k] : [];
          }
        });
      }
      setRegionalList(regional);
    }
  }, [selectedRow]);
  const [maxWidth, setMaxWidth] = React.useState("md");
  const fetchEmailResult = React.useMemo(
    () =>
      throttle(
      (event: any, callback: (results: IEmail[]) => void) => {
        const payload: IYardUserRequestPayload | InitialReqPaylod = {
          accountId: 1,
          searchString: event.target.value,
        };
        fetch(
            `https://jsonplaceholder.typicode.com/users?email=${event.target.value}`
          )
            .then((res) => res.json())
            .then((res) => res.data ? callback(res.data.slice(0, 10)) : callback([]))
      },
      200
    ),
    []
    );

  const emailOnChange = (event: any, regionalId: number, index: number, emailId: number) => {
    setRegionalId(regionalId);
    setEmailCurrentIndex(index);
    setSelectedEmailId(emailId);
    fetchEmailResult(event,(results: IEmail[]) => {
      console.log('results' , results)
      if (results.length) setEmailOptions(results);
    });
  };

  useEffect(() => {
    if (isSaveSuccess) {
      handleClose();
    }
  }, [isSaveSuccess]);
  useEffect(() => {
    if (isSuccess) {
      setFetching(false);
    }
  }, [isSuccess]);

  const addEmail = (id: number) => {
    setRegionalList((list) =>
      list.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            emails: [
              ...item.emails,
              {
                emailAddress: "",
                firstName: "",
                lastName: "",
                id: Math.floor(Math.random() * 999),
                fetching: false,
              },
            ],
          };
        }
        return item;
      })
    );
  };

  const deleteEmail = (email: IEmail, regionId: number) => {
    const regionalListCopy = [...RegionalList].map((prop: IRegionalList) => {
      if (prop.id === regionId) {
        return {
          ...prop,
          emails: prop.emails.filter((prop) => prop.id !== email.id),
        };
      }
      return { ...prop };
    });
    setRegionalList(regionalListCopy);
  };

  const setOnChangeOption = (email) => {
    setSelectedEmailId(null);
    setRegionalList((list) =>
      list.map((item) => {
        if (item.id === regionalId) {
          return {
            ...item,
            emails: [
              ...item.emails.map((prop) => {
                return {
                  ...prop,
                  ...email,
                };
              }),
            ],
          };
        }
        return item;
      })
    );
  };

  const EmailItem = ({ email, mIndex, prop }) => (
    <>
      
          
             option.emailAddress}
              onInputChange={($event) => emailOnChange($event, prop.id, mIndex, email.id)}
              onChange={($event, value) => setOnChangeOption(value)}
              fullWidth
              open={email.id === selectedEmailId}
              renderInput={(params) => (
                
              )}
              renderOption={(props, option) => {
                return (
                  
                    {option.emailAddress}
                  
                );
              }}
            />
             deleteEmail(email, prop.id)}
            />
          
        
          
            Email : {email.emailAddress}
            Full Name: {email.firstName} {email.lastName}
          
          {/* {fetching ? "Fetching...." : null} */}
        
      
    
  );


  return (
    
      Edit

      
        
          
            Sub-Region (Sub-Division)
            
            
              
            
          
          
            Sub-Region (Sub-Division)
            
            
              
            
          
          
            Market
            
            
              
            
          
        
        {RegionalList.map((prop: IRegionalList, index: number) => (
          
            
              {prop.name}*{" "}
               addEmail(prop.id)}
              />
            
            
            {prop.emails.map((email: IEmail, mIndex: number) => (
              
            ))}
          
        ))}
      
      
        
        
      
    
  );
};

export default EditProperties;

Elvin · Accepted Answer

You need just reset all used states as values of form when clicking handleClose, my suggestion would be to use just one object state for form values.

Example:

const onClose = () => {
    handleClose();
    setRegionalList(RegionalListData);
   } 

return (

how to reset dialog in react after close

Answers (2)

Related Questions