title: React.js: How to return the previous state value when cancel is clicked in a input field that changes the state
body: <p>The parent component passes every prop, state and function, to the child component. Child component has no state or function of its own. Multiple of the same child component are rendered depending on the form fields.</p>
  <p>I want a <strong>Cancel</strong> button beside each input field. As it is now, editing the value in the input field also changes the state. Therefore, simply defining the cancelling feature as <code>handleCancelClick = () =&gt; {setEdit(false)}</code> won't work. Because, it won't revert the changes made to the state. It would let the changed state value appear. Therefore, how do I cancel the edits made and show the original previous value once the <strong>Cancel</strong> is clicked?</p>
  <p>Here's the parent:</p>
  <pre><code>export default function App() {
      const [about, setAbout] = useState(&quot;Hi there&quot;);
      ...
     
      const handleUserAbout = (about) =&gt; {
        console.log(about); };
  
      const [isEditFields, setIsEditFields] = useState({});
  
      const handleSetEdit = (name, isEdit) =&gt; {
        setIsEditFields((prev) =&gt; ({
          ...prev,
          [name]: isEdit
        }));
      };
  
      return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;EditComponent
              fieldName={&quot;About&quot;}
              value={about}
              inputType={&quot;text&quot;}
              placeHolder={&quot;Enter some info&quot;}
              name={&quot;about&quot;}
              onChange={(e) =&gt; setAbout(e.target.value)}
              onSubmit={handleUserAbout(about)}
              isEdit={isEditFields.about}
              setEdit={(isEdit) =&gt; handleSetEdit(&quot;about&quot;, isEdit)}
          /&gt;
          &lt;EditComponent
              ...
          /&gt;
        &lt;/div&gt;
      );
  }
  </code></pre>
  <p>And the child:</p>
  <pre><code>export default function EditProfileComponent({
    fieldName, value, inputType, placeHolder, name, onChange, onSubmit, isEdit, setEdit }) {
    return (
      &lt;p&gt;
        {fieldName}:{&quot; &quot;}
        {value === &quot;&quot; ? (
          &lt;span&gt;
            &lt;input type={inputType} placeholder={placeHolder} name={name} onChange={onChange} /&gt;
            &lt;button type=&quot;submit&quot; onClick={onSubmit}&gt;Add&lt;/button&gt;
          &lt;/span&gt;
        ) : !isEdit ? (
          &lt;span&gt;
              {value}&lt;button onClick={() =&gt; setEdit(true)}&gt;Edit&lt;/button&gt;
          &lt;/span&gt;
        ) : (
          &lt;span&gt;
            &lt;input type={inputType} value={value} name={name} onChange={onChange} /&gt;
            &lt;button type=&quot;submit&quot; onClick={onSubmit}&gt;Save&lt;/button&gt;
            &lt;button type=&quot;submit&quot; onClick={() =&gt; setEdit(false)}&gt;Cancel&lt;/button&gt;
          &lt;/span&gt;
        )}
      &lt;/p&gt;
    );
  }
  </code></pre>
  <p>So, how do I press <strong>Cancel</strong> and have the previous state values reappear over the changed value?</p>