i am trying to store form email/password registration with next.js but it is giving error

import {useState} from 'react'




type Props = {
  label: string
  placeholder?: string
  onChange: () => void
  name?: string
  value?:  any
  
}

export const TextField = ({ label, onChange, placeholder, name, value }: Props) => {
  const [inputs, setInputs] = useState({})
  const handleChange = (event: any) => {
    const name = event.target.name
    const value = event.target.value
    setInputs(values => ({...values, [name]: value}))
  }
  const handleSubmit = (event: any) => {
    event.preventDefault()
    console.log(inputs)
  }
  return (
    <div style={{width:'100%'}}>
      <div className='text-sm my-2'>{label}</div> 
      <input
        className='border-blue-200 border-2 rounded focus:ring-blue-200 focus:border-blue-200 focus:outline-none px-2'
        style={{ height: '45px', maxWidth: '280px', width: '100%', backgroundColor: '#0D0D0D' }}
        placeholder={placeholder}
        onChange={onChange}
        name={name}
        value={name}
       

      />
    </div>
  )
}

and i have this in register file

<form action="" method="post">
       <div className='flex flex-col flex-wrap gap-y-5'>
         
           <TextField  name="email" value={inputs.email || ""} label='Enter Your email address:' onChange={() => {handleChange}} />
           <TextField name="password" value={inputs.password || ""} label='Enter Your Password:' onChange={() => {handleChange}} />
        
       </div>

       <div className='mt-7 flex items-center gap-x-2'>
         <PrimaryButton text='Register' onClick={() => {handleSubmit}} /> 
         <div className='text-sm'>
           Already Registered? <a onClick={() => push('/login')}>Login</a>
         </div>
       </div>
       </form>

it keeps saying 'Cannot find name 'handleSubmit'.ts(2304)', it cannot read input, handleSubmit, or handleChange from the other file.

CodePudding user response：

try these codes:

 onClick={handleSubmit}

or

onClick={() => handleSubmit()} 

CodePudding user response：

First, why a TexField component has a handleSubmit and handleChange ?

This create an error, because if you call TexField many times, handleSubmit and handleChange will be created and called many times.

Refactor the code:

type FormSignup = {
  email: string;
  password: string;
}

type Props = {
  label: string
  placeholder?: string
  onChange: () => void
  name?: string
  value?:  any
}

const TextField = ({ label, onChange, placeholder, name, value }: Props) => {
  return (
    <div style={{width:'100%'}}>
      <div className='text-sm my-2'>{label}</div> 
      <input
        className='border-blue-200 border-2 rounded focus:ring-blue-200 focus:border-blue-200 focus:outline-none px-2'
        style={{ height: '45px', maxWidth: '280px', width: '100%', backgroundColor: '#0D0D0D' }}
        placeholder={placeholder}
        onChange={onChange}
        name={name}
        value={name}
      />
    </div>
  )
}

const Signup = () => {
 const [inputs, setInputs] = useState<FormSignup | null>(null);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const name = event.target.name
    const value = event.target.value
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    console.log(inputs)
  }

  return(
    <form onSubmit={handleSubmit}>
      <div className='flex flex-col flex-wrap gap-y-5'>
        <TextField onChange={handleChange} name="email" value={inputs?.email || ""} label='Enter Your email address:'  />
        <TextField onChange={handleChange} name="password" value={inputs?.password || ""} label='Enter Your Password:'  />
       </div>
       <div className='mt-7 flex items-center gap-x-2'>
         <PrimaryButton text='Register' type="submit" /> 
         <div className='text-sm'>
           Already Registered? <a onClick={() => push('/login')}>Login</a>
         </div>
       </div>
    </form>
  );
}