setData() can take only full objects

[king2]

I have found setData() calls in LightStateWebSocketController.tsx:
const changeLedOn = (event: React.ChangeEvent<HTMLInputElement>) => { setData({ led_on: event.target.checked }, saveData); }

setData() is defined as function that can take 'data' argument of pre-defined type (in WebSocketController.tsx).
If I want to make websockets page that takes many variables from ESP, but each of such variable should be updated separately, I have to make something like this:
const changeLedOn = (event: React.ChangeEvent<HTMLInputElement>) => { //setData({ led_on: event.target.checked }, saveData); var new_data = data; new_data.led_on = event.target.checked; setData(new_data, saveData); }
(because I have another fields in data and must use antire object when updating).
But inside setData() it uses setState() function - and React's setState() can take not full object, just values to be changed.

Is this right?
Maybe setData() should take arguments like React's setState()?

[rjwats]

For that you could use a spread operator to do it as a one liner: setData({...data, led_on: event.target.checked}, saveData); The HoC also exposes a "handeValueChange" prop for convenience when updating a single top-level property from an HtmlInputElement: onChange={handleValue('some_value')}; And of course you don't have to use the same pattern the UI uses for the example. You could use a WebSocket directly and do it any way you want.

…

On Sat, Nov 28, 2020 at 2:29 PM Oleg King ***@***.***> wrote: I have found setData() calls in LightStateWebSocketController.tsx: const changeLedOn = (event: React.ChangeEvent<HTMLInputElement>) => { setData({ led_on: event.target.checked }, saveData); } setData() is defined as function that can take 'data' argument of pre-defined type (in WebSocketController.tsx). If I want to make websockets page that takes many variables from ESP, but each of such variable should be updated separately, I have to make something like this: const changeLedOn = (event: React.ChangeEvent<HTMLInputElement>) => { //setData({ led_on: event.target.checked }, saveData); var new_data = data; new_data.led_on = event.target.checked; setData(new_data, saveData); } (because I have another fields in data and must use antire object when updating). But inside setData() it uses setState() function - and React's setState() can take not full object, just values to be changed. Is this right? Maybe setData() should take arguments like React's setState()? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#208>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKE4VFLCIHLCLOL6OJQZV3SSECMJANCNFSM4UF2OA3Q> .

[king2]

I tried '...data' and it works, but as I understand, it will translate into object with two values with same key like this:

setData({ counter: 1, led_on: true, led_on: event.target.checked}, saveData); // for example

Is this behavior (take last value from same keys) is defined somewhere, i.e. can I be sure that new value of led_on will be assigned on all browsers, platforms an so on?

I think handeValueChange is best choice in my case as it has determined behavior.

Thanks!

[rjwats]

It's a perfectly valid, well defined use of the spread operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

…

On Sat, 28 Nov 2020, 16:43 Oleg King, ***@***.***> wrote: I tried '...data' and it works, but as I understand, it will translate into object with two values with same key like this: setData({ counter: 1, led_on: true, led_on: event.target.checked}, saveData); // for example Is this behavior (take last value from same keys) is defined somewhere, i.e. can I be sure that new value of led_on will be assigned on all browsers, platforms an so on? I think handeValueChange is best choice in my case as it has determined behavior. Thanks! — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#208 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKE4VAZ2DSNW4OCSII4HJDSSESD3ANCNFSM4UF2OA3Q> .

[king2]

I will not dig deeper into docs, proposals and trying to find official documents that point to behavior spread operator for same keys in objects, instead of this I will just trust you that last key will override previous one :)

Thank you!