Reactjs -- making api request based on check/uncheck of checkbox not understanding properly

Question

I have a piece of code in reactJS which will make api request based on check/uncheck in future. Right now its just pushing/removing categoryId based on check/uncheck of checkbox in an array.

The code is perfect and working fine but I am unable to understand the code in some place. Please help me understand it.

code::

import React, {useState, useEffect} from 'react';

const Checkbox = ({categories}) => {
    const [checked, setChecked] = useState([]);

    const handleToggle = c => () => {
        // returns the first index or -1
        const currentIndex = checked.indexOf(c);
        const newCheckedCategoryArray = [...checked];

        if(currentIndex === -1){
            //then push in default state or remove it if its already there.
            newCheckedCategoryArray.push(c);
        }
        else{
            newCheckedCategoryArray.splice(currentIndex, 1)
        }
        setChecked(newCheckedCategoryArray);
        console.log(newCheckedCategoryArray);
    }

    return categories.map((c, i) => (
        <li className="list-unstyled" key={i}>
            <input type="checkbox" value={checked.indexOf(c._id === -1)}
                className="form-check-input" onChange={handleToggle(c._id)}
                 />
            <label className="form-check-label">{c.name}</label>
        </li>
    ));

}
export default Checkbox;

The code which i am not understand is below:: what is the purpose of the logic on 'value' prop there.

 <input type="checkbox" value={checked.indexOf(c._id === -1)}
                className="form-check-input" onChange={handleToggle(c._id)}
                 />

A couple of things. 1) why not ask the person who wrote the code what it's purpose is? 2) Technically it has no pre-defined purpose because value is not a valid attribute of a checkbox. — gforce301
– gforce301, Commented Dec 12, 2019 at 19:48

NegativeFriction · Accepted Answer · 2019-12-12 19:55:43Z

Check out the developer info on input type='checkbox'.

The short and sweet version:

[The value attribute is] A DOMString representing the value of the checkbox. This is never seen on the client-side, but on the server this is the value given to the data submitted with the checkbox's name.

The code that you've shown doesn't indicate that the value attribute is being used anywhere, so it's not going to cause you any issues; you could remove it and this would still function just fine. (Assuming value isn't being used somewhere else, in another function)

Incidentally, are you certain that this is working perfectly? It looks to me like you might have a typo. I think that

<input type="checkbox" value={checked.indexOf(c._id === -1)}
            className="form-check-input" onChange={handleToggle(c._id)}
             />

should be written as

<input type="checkbox" value={checked.indexOf(c._id) === -1}
            className="form-check-input" onChange={handleToggle(c._id)}
             />The code you wrote had a T/F statement inside of "indexOf," so you would only ever have searched the checked array for the first instance of a boolean true or a boolean false.

The code I wrote would check to see if the id you submitted is in the checked array or not. If it is not in the checked array, it would return true. if it is in the checked array, it would return fales.

Kabeer Singh · Accepted Answer · 2019-12-12 20:50:05Z

1

check the example below::

'Blue Whale'.indexOf('Blue') !== -1; // true 'Blue Whale'.indexOf('Bloe') !== -1; // false

and in your case:: 'Blue Whale'.indexOf('Blue') === -1; //false it will check whether the found index is equal to -1 or not. if -1 then evaluate to true else false.

answered Dec 12, 2019 at 20:50

Kabeer Singh

1432 silver badges7 bronze badges

Collectives™ on Stack Overflow

Reactjs -- making api request based on check/uncheck of checkbox not understanding properly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related