How to rest or empty input field in react?

Question

I am using react-final-form library .so in which I have one checkbox , on click of checkbox it shows textfield . User can enter text in text field .but if you uncheck the checkbox text retain in textfield .

Steps to reproduce this bug

Checked the check box

Enter “abc” text in input field

Unchecked the checkbox

Again checked the checkbox.Textfied retain abc text.

<FieldPrefix prefix="app1">
  <div>
    <label>
      app1
      <PrefixedField name="appStatus" component="input" type="checkbox" />
    </label>
  </div>
  {values.app1 && values.app1.appStatus ? (
    <div>
      <label>City</label>
      <PrefixedField
        name="city"
        component="input"
        type="text"
        placeholder="City"
      />
    </div>
  ) : null}
</FieldPrefix>;

https://codesandbox.io/s/optimistic-field-56zpm

https://github.com/final-form/react-final-form

Answer 1

use value props in the input field where put a state like

<div>
    <label>City</label>
    <PrefixedField
    name="city"
    component="input"
    type="text"
    placeholder="City"
    value = {this.state.valueForInput}
    />
</div>

and clear the state valueForInput when user uncheck the check box