CODEWITHSUNDEEP
reactjsreact-hooksuse-state
rajiv ks2
rajiv ks2

Reputation: 49

Error while adding with spread operator in React Hooks

while adding selected eid from the checkbox to the array I am getting an error. this is my checkbox selection which is in Acomponent.

 const checkBoxSelection = (eID, e) => {
        console.log('eID', eID);
        console.log('e.target.value', e.target.checked);
        if (e.target.checked) {
            setCheckedItems([...checkedItems, eID]);
        } else {
            setCheckedItems((prevState) => [...prevState.filter((item) => item !== eID)]);
        }
    };

the checkbox is in Bcomponent. I am sending through pops.

<input type='checkbox' onChange={(e) => checkBoxSelection(data.id, e)} />

error is

 Uncaught TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method

Upvotes: 0

Views: 301

Answers (1)

Shyam
Shyam

Reputation: 5497

Looks like your initial values of checkedItems is not an Array . Please make sure you are passing the initial value as []

const [ checkedItems, setCheckItems ] = useState([])

Also its not needed to spread an array returned from the filter as it returns a new Array .

setCheckedItems((prevState) =>prevState.filter((item) => item !== eID))

Upvotes: 4

Related Questions