"TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) "

Question

I am making controlled components in React and I am using states and seting states in forms. But this error occurs.

Here's the code of Quiz.js in which I am making this form for my Quiz app

`

import React from 'react'

export default function Quiz() {
    const [questionForm, setQuestionForm] = React.useState(
        {questionOne: "",
        questionTwo: ""}
    )
    function handleChange(event) {
        const [name , value , type , checked] = event.target
        setQuestionForm(prev => {
                return {
                    ...prev,
                    [name]: type === 'checkbox' ? checked : value
                }
            })
    }
    
    return (
    <div>
        <div className = 'Question'>
         <form>
         <fieldset>
         <legend>What is the capital of UK?</legend>
         <label>
                    Paris
            <input 
                id='Paris'
                type="radio"
                value='Paris'
                name='questionOne'
                onChange={handleChange}
                checked={questionForm.questionOne === 'Paris'}
            />
        </label>
        <label>
                    Moscow
            <input 
                id='Moscow'
                type="radio"
                value='Moscow'
                name='questionOne'
                onChange={handleChange}
                checked={questionForm.questionOne === 'Moscow'}
            />
        </label>
        </fieldset>
         </form>
         <button className='check'>Check Answers</button>
        </div>
    </div>
    )
}

`

I've checked the code again and again but I can't overcome the problem, what's wrong with my code?

Answer 1

replace

    const [name , value , type , checked] = event.target

with this

    const {name , value , type , checked} = event.target

Demo