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

Firstly pick value for textbox from a state variable and hook onChange event for textbox and change state accordingly. When you reset it just update the state variable to an empty string and you will see it clean. — Dinesh Kumar

Kazi Hasan Ali Kazi Hasan Ali · Accepted Answer · 2019-08-02T05:31:50

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

How to rest or empty input field in react?

2 Answers