Hey I am making a contact page in which the current logged-in user's email and contact will be dynamically available from the database and he is able to send his message via the contact page. But I am not able to enter any data in the message or any other input box and getting "Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) at handleInput". How to resolve this issue?

This is the code:

import React, { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap";
import { NavLink, useNavigate } from "react-router-dom";
import "../css/contact.css";

const Contact = ()=>{
    
   
    const [userData, setUserData] = useState({name:"", email:"", phone:"", message:""});
    const userContact = async() =>{
        try {
            const res = await fetch("/getdata",{
                method: "GET",
                headers: {
                    "Content-Type" : "application/json"
                    

                },
                
            });
            const data = await res.json();
            console.log(data);
            setUserData({...userData, name:data.name, email: data.email, phone: data.phone});
            if(!res.status === 200){
                const error = new Error(res.error);
                throw error;
                
            }
            

        } catch (err) {
            console.log(err);
            
        } 
    }
    useEffect(()=>{
        userContact();
    },  []);

    const handleInputs = (event)=>{
        const [name, value] = event.target;
        setUserData({...userData, [name]:value});
    }

    const ContactForm = async(event)=>{
        event.preventDefault();
        const {name, email, phone, message} = userData;
        const res = await fetch("/contact",{
            method: "GET",
            headers: {
                "Content-Type" : "application/json"
            },
            body: JSON.stringify({
                name, email, phone, message
            })
        });
        const data = await res.json();
        if(!data){
            console.log("message not send");
        }else{
            alert("Message Sent");
            setUserData({...userData, message:""});
        }
    }


//sending data to backend

    return (
       
<section >

        <div className="container mt-5">
        {/* <!--Section heading--> */}
    <h2 >Contact us</h2>
    {/* <!--Section description--> */}
    <p >Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within
        a matter of hours to help you.</p>

    <div >

        {/* <!--Grid column--> */}
        <div >
            <form id="contact-form" name="contact-form" method="POST">

                {/* <!--Grid row--> */}
                <div >

                    {/* <!--Grid column--> */}
                    <div >
                        <div >
                            <input type="text" id="name" name="name" 
                             value={userData.name} 
                             onChange={handleInputs} />
                            <label for="name" >Your name</label>
                        </div>
                    </div>
                    {/* <!--Grid column--> */}

                    {/* <!--Grid column--> */}
                    <div >
                        <div >
                            <input type="text" id="phone" name="phone"  
                            value={userData.phone}
                            onChange={handleInputs} />
                            <label for="phone" >Phone no:</label>
                        </div>
                    </div>
                    {/* <!--Grid column--> */}

                </div>
                {/* <!--Grid row--> */}

                {/* <!--Grid row--> */}
                <div >
                    <div >
                        <div >
                            <input type="text" id="email" name="email"  
                            value={userData.email}
                            onChange={handleInputs} />
                            <label for="email" >Your email</label>
                        </div>
                    </div>
                </div>
                {/* <!--Grid row--> */}

                {/* <!--Grid row--> */}
                <div >

                    {/* <!--Grid column--> */}
                    <div >

                        <div >
                            <textarea type="text" name="message" rows="2" 
                            value={userData.message}
                            onChange={handleInputs}
                            ></textarea>
                            <label for="message">Your message</label>
                        </div>

                    </div>
                </div>
                {/* <!--Grid row--> */}

            </form>

            <div >
                <NavLink className="btn btn-primary buttn" onClick={ContactForm}>Send</NavLink>
                
            </div>
            <div ></div>
        </div>
        {/* <!--Grid column--> */}

        {/* <!--Grid column--> */}
        <div >
            <ul >
                <li><i ></i>
                    <p>San Francisco, CA 94126, USA</p>
                </li>

                <li><i ></i>
                    <p>  01 234 567 89</p>
                </li>

                <li><i ></i>
                    <p>[email protected]</p>
                </li>
            </ul>
        </div>
        {/* <!--Grid column--> */}

    </div>
        </div>
    

</section>
    )
}

export default Contact;

CodePudding user response：

You probably meant to use object destructuring instead of array destructuring:

const { name, value } = event.target;

because using array destructuring here is kinda like this:

const name = event.target[0];
const value = event.target[1];

which is clearly incorrect since event.target is a textarea.