change menu in nextJS / reactJS

Question

here I have a case where when I click a link "create custom url" it will change to "cancel" and "save".

for example like this :

When I click "create custom url"

Turned into like this

Want it like that. However, when I try to make it this is the result

Cancel and save together, cancel and save should have its own function.

This is my code:

const ShareKey = ({ surveyId, shareKey = "", setShareKey, refProps }) => {
    const [isLoading, setIsLoading] = useState(false);
    const [customInput, setCustomInput] = useState(process.env.NEXT_PUBLIC_SHARE_URL + "/");
    const [active, setActive] = useState(false);
    const [show, setShow] = useState(false);

    const getLink = () => {
        setShareKey("");
        setIsLoading(true);

        automaticApproval({ surveyId })
            .then((resolve) => {
                console.log(resolve);
                setShareKey(resolve.key);
            })
            .catch((reject) => {
                console.log(reject);
                toast.error(reject);
            })
            .finally(() => {
                setIsLoading(false);
            });
    };

    return (
        <section>
            <button onClick={getLink} disabled={isLoading} className={styles.link_button}>
                {`GENERATE ${shareKey && "NEW "}LINK`}
            </button>
            {shareKey && (
                <div className={styles.link_container}>
                    <label>Share link</label>
                    <div className={styles.link}>
                        <input
                            value={active ? customInput : process.env.NEXT_PUBLIC_SHARE_URL + "/" + shareKey}
                            onChange={(e) => {
                                setCustomInput(e.target.value);
                            }}
                            disabled={!active}
                            ref={refProps}
                        />
                        {!show && 
                            <button
                            onClick={() => {
                                if (typeof navigator !== "undefined") {
                                    navigator.clipboard.writeText(refProps.current.value);
                                    toast.info("Copied to clipboard");
                                }
                            }}
                        >
                            copy
                        </button>
                        }
                    </div>
                    <p className={styles.custom} onClick={() => {setActive(!active); setShow(!show);}}>
                        {active ? "Cancel   " + "   Save" : "Create Custom URL"}
                    </p>
                </div>
            )}
        </section>
    );
};

Is there something wrong in my code? Please help. Thank you

Answer 1

This is how you gonna do it. Also I changed your <p> to <div>. You can't nest anything inside of it. You can change the container <div> to React Fragment if you don't want have some additional div.

You also have to fix the style.

const ShareKey = ({ surveyId, shareKey = "", setShareKey, refProps }) => {
  const [isLoading, setIsLoading] = useState(false);
  const [customInput, setCustomInput] = useState(
    process.env.NEXT_PUBLIC_SHARE_URL + "/"
  );
  const [active, setActive] = useState(false);
  const [show, setShow] = useState(false);

  const getLink = () => {
    setShareKey("");
    setIsLoading(true);

    automaticApproval({ surveyId })
      .then((resolve) => {
        console.log(resolve);
        setShareKey(resolve.key);
      })
      .catch((reject) => {
        console.log(reject);
        toast.error(reject);
      })
      .finally(() => {
        setIsLoading(false);
      });
  };

  const toggleFunction = () => {
    setActive(!active);
    setShow(!show);
  };
  return (
    <section>
      <button
        onClick={getLink}
        disabled={isLoading}
        className={styles.link_button}
      >
        {`GENERATE ${shareKey && "NEW "}LINK`}
      </button>
      {shareKey && (
        <div className={styles.link_container}>
          <label>Share link</label>
          <div className={styles.link}>
            <input
              value={
                active
                  ? customInput
                  : process.env.NEXT_PUBLIC_SHARE_URL + "/" + shareKey
              }
              onChange={(e) => {
                setCustomInput(e.target.value);
              }}
              disabled={!active}
              ref={refProps}
            />
            {!show && (
              <button
                onClick={() => {
                  if (typeof navigator !== "undefined") {
                    navigator.clipboard.writeText(refProps.current.value);
                    toast.info("Copied to clipboard");
                  }
                }}
              >
                copy
              </button>
            )}
          </div>

          {active ? (
            <div>
              <button onClick={toggleFunction}>Cancel</button>
              <button onClick={yourSaveFunction}>Save</button>
            </div>
          ) : (
            <div className={styles.custom} onClick={toggleFunction}>
              Create Custom URL
            </div>
          )}
        </div>
      )}
    </section>
  );
};