ReactJS setState to blank object not working

Question

i have state like this

state = {
        params: {}
    }

let say we set the params by this.setState({params:{data:2}}) then when we want to revert back to its initial state we call this.setState({params:{}}). The state is reverted, but the problem is that the view still render 2 (value of this.state.params.data). The only way that working is i call this.setState({params:{data:''}}). Imagine if we have many fields, we wont't do that. Is there any solution?

Link for codesandbox is here

I dont see the issue you're having when I try to replicate it in this sandbox. https://codesandbox.io/s/determined-dirac-mr6oy — Chris Ngo, Aug 30 '19 at 07:47
Have you checked console for errors? I'm assuming, your code would look like `<...>{ this.state.params.data }`. But when you set `params: {}`, that code will return `undefined`. This will work but if you have nay further levels, you will break code. If code throws error, execution is halted and hence no re-render — Rajesh, Aug 30 '19 at 07:48
Maybe you have the shouldComponentUpdate method not working correctly. — giggi__, Aug 30 '19 at 07:53
i Updated the question, please kindly check it. I thin it is the problem wit react semantic ui @ChristopherNgo — Matius Nugroho Aryanto, Aug 30 '19 at 08:00
i Updated the question, please kindly check it. I thin it is the problem wit react semantic ui @Rajesh — Matius Nugroho Aryanto, Aug 30 '19 at 08:01
@MatiusNugrohoAryanto see my solution below. That should resolve it for you. :) — Chris Ngo, Aug 30 '19 at 08:13

Chris Ngo · Accepted Answer · 2019-08-30T08:20:57.550

3

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.

edited Aug 30 '19 at 08:20

answered Aug 30 '19 at 08:11

Chris Ngo

15,460
3
23
46

This is not semantic UI issue, it's React behaviour when changing uncontrolled input to controlled and vice versa. – Clarity Aug 30 '19 at 08:14
@Clarity you're right, and now that you mention it, my code does resolve the issue regarding controlled and uncontrolled inputs. – Chris Ngo Aug 30 '19 at 08:15

Clarity · Answer 2 · 2019-08-30T08:10:35.843

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.

please kindly check my updated question, is it problem with semantic ui? — Matius Nugroho Aryanto, Aug 30 '19 at 08:01

ReactJS setState to blank object not working

2 Answers2