Uncaught TypeError: setName is not a function

Viewed 33

this is my code i have defined function but it is still showing me error like this for setname setemail password

import React, {useState} from 'react'
import './Auth.css'
import icon from '../../assets/logo.svg'
import AboutAuth from './AboutAuth'

const Auth = () => {

    const [isSignup, setIsSignup] = useState(false)
    const {name, setName} = useState('')
    const {email, setEmail} = useState('')
    const {password, setPassword} = useState('')


    const handleSwitch = () => {
        setIsSignup(!isSignup)
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        console.log({ name, email, password})
    }

  return (
    <div>
        <section className='auth-section'>
            {
                isSignup && <AboutAuth />
            }
            <div className='auth-container'>
                { !isSignup && <img src={icon} width='50px' alt='stack overflow' className='login-logo' /> }
                <form onSubmit={handleSubmit}>
                    {
                        isSignup && (
                            <label htmlFor='name'>
                                <h4>Display Name</h4>
                                <input type="text"  id='name' name='name' onChange={(e) => {setName(e.target.value)}} />
                            </label>
                        )
                    }
                    <label htmlFor="email">
                        <h4> Email </h4>
                        <input type="email" name='email' id='email' onChange={(e) => {setEmail(e.target.value)}} />
                    </label>

                        <input type="password" name='password' id='password' onChange={(e) => {setPassword(e.target.value)}}/>
    
    export default Auth

Auth.jsx:36 Uncaught TypeError: setName is not a function And setEmail is not a function And setPassword is not a functionm Help Me To Solve That Issue

1 Answers

The problem lies in destructuring useState hook. React.useState hook returns an array of [state, setState]

Solution:

const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
Related