Enable the input text field on clicking of a button-CodePudding

I have two input fields which are basically password fields. The disabling of these two fields are controlled by two external flags. if already set flag is true, then make this disabled and show the text as "already set". Also , there is a button next to this input field that can make this input enable and then user should be able to enter the text as password. I am clearing "Already set" text whenever I click on this edit. In my case the content is cleared, but I am unable to edit.

Can some one help me here.

Sandbox:

Note that if Test needs to respond to and handle the alreadySetVal1 and alreadySetVal2 props values changing during its life that you might also need to implement a useEffect hook to synchronize the local state to keep everything running as expected.

It may look something like the following:

useEffect(() => {
  const input1 = alreadySetVal1 ? "Already Set" : "";
  const input2 = alreadySetVal2 ? "Already Set" : "";
  setInput1(input1);
  setInput2(input2);
  setConfig({
    config1: !!input1,
    config2: !!input2
  });
}, [alreadySetVal1, alreadySetVal2]);