score:3

Accepted answer

you can resolve this by using a ternary operator for the value property. see working sandbox: https://codesandbox.io/s/blissful-clarke-l2pif

<input
   value={params["data"] ? params["data"] : ""}
   onchange={(e, { value }) => {
      this.buildparams("data", value);
   }}
/>

this will work because it forces the semantic-ui tag to conditionally check for the value in our state, instead of using a static binding like params.data. if there is a data property in the object, then we will use its value. if not, then display an empty string.

the value used by the input is controlled at all times and will not be retained when reverting params to {} . i'm assuming you can swap data with a specific name or key corresponding to each input.

score:1

calling this.setstate({params:{}}) will set the params to an empty object on the state. to verify you can log the new state in the callback:

this.setstate({params:{}}, () => console.log(this.state)) // {params: {}}

edit: looking at the updated question, the issue you're having is that your state is connected to the input via this.state.params.data. in this case when you set the state params to an empty object, the value of input will be set to undefined and you'll get a warning: a component is changing a controlled input of type text to be uncontrolled.

in this case your default state has to look like this:

this.state = {
  params: {data: ''}
}

and the reset method:

revertstate = () => {
    this.setstate({
      params: {data: ''}
    });
  };

alternatively you can make your input uncontrolled by removing value prop, but in that case you won't be able to modify it directly.


More Query from same tag