Ttdfjt

What is the correct way to change checkbox value?

option 1

import React, useState from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() 
 const [x, setX] = useState(false);

 const soldCheckbox = ( target: checked ) => 
 console.log(x, checked);
 setX(checked);
 ;
 return (
 <div>
 <input type="checkbox" checked=x onChange=soldCheckbox />
 </div>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

option 2

import React, useState from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() 
 const [x, setX] = useState(false);
 console.log(x);
 return (
 <div>
 <input type="checkbox" checked=x onChange=() => setX(!x) />
 </div>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In fact, I think there's no difference, but I just wanted to hear a different opinion. Maybe something I do not know or there may be other solutions to this problem.

I think that it all depends on the situation.

The first option will be better if you have a lot of form and components. You can handle all with one handler.

const handler = (e) => 
 const target = e;
 const value = target.type === 'checkbox' ? target.checked : target.value;
 const name = target;

 setForm( f => ( ...f, [name]: value ));
;

Second, if checkbox is one and the application must somehow react to its change.
there is a third way to uncontrolled inputs.

Both ways are almost the same, but the first option actually is more redundant, let's analyze why:

Both the first and second methods are implementing controlled components

This means that you are providing a value and a way to change it, so the responsibility to update and control the values are abstracted from the component.

But why the first way is redundant?

You don't actually need to read from the e.target.checked cause it always reflects the local state x, so there is no need to read from e.target.checked and reverse it by doing: setX(!e.target.checked) since x and the e.target.checked will always be the same.

Caveats

Even though is fine to do onClick=e => parentHandler(e) in a inline expression(arrow function) you should be careful, passing it like this to an input won't cause any problems, but when you are passing to a child component that implements React.memo or PureComponent for example, this will actually re render the component everytime, cause a new instance of the function is always created (signature is the same, but the shallow comparison will always return false cause they are different instances), so for optimization reasons is always best pass props like this: <Child onClick=this.clickHandler id=item.id /> and on the child: onClick=() => this.props.onClick(this.props.id) instead of just: <Child onClick=e => this.onClick(item.id) />

In this specific case, I would have chosen option 2, cleaner code in my opinion.

setX changes the state, no need for a function calling setX and extracting the value from event if we know the value is x.

The only difference is clean coding, first way is better if you need to do something except changing state (for example to call an http request) and the second is good if you just need checkbox to work and store its value.

It looks like both of your options are equivalent. If we look at the documentation for the onChange event provided by React (not the change event provided by html) it states:

The onChange event behaves as you would expect it to: whenever a form field is changed, this event is fired.

We intentionally do not use the existing browser behavior because onChange is a misnomer for its behavior and React relies on this event to handle user input in real time.

https://reactjs.org/docs/dom-elements.html#onchange

So, simply choose the option that you think produces cleaner code.

import React, useState from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() 
 const [x, setX] = useState(false);

 const soldCheckbox = ( target: checked ) => 
 console.log(x, checked);
 setX(checked);
 ;
 return (
 <div>
 <input type="checkbox" checked=x onChange=soldCheckbox />
 </div>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

I'm always choosing option 1 because it is a way more generic way for defining form field change events. In most of the cases, I have something in generic form components

function SomeForm() 
 const [formData, setFormData] = useState( name: "", accept: false );
 const onFieldChange = ( target: name, value, checked ) => 
 if (typeof checked !== 'undefined') // checking if we have a "checked" field inside target
 setFormData( [name]: checked );
 

 setFormData( [name]: value );
 

 return (
 <form>
 <input type="text" name="name" value=formData.name onChange=onFieldChange />
 <input type="checkbox" name="accept" checked=formData.accept onChange=onFieldChange />
 </form>
 )

The idea behind this is that any way we are going to receive a target DOM object which contains both checked and value, so we can make it generic.

Hope this helps