I am working with Reactjs and nextjs,Right now i am trying to get input type text value but right now i am not getting any value(name is empty during alert), here is my current code

import dynamic from 'next/dynamic';
import React, { FormEventHandler, useRef } from 'react';
import { useEffect, useState } from "react";
import axios from 'axios';

export default function Testform() {
    const [state, setState] = useState({ name: '' });
    const [Name, setName] = useState('');
    const handleChange = (event:any) => setState({...state, name: event.target.value })
  
      const submitHandler: FormEventHandler<HTMLFormElement> = async (event) => {
       event.preventDefault();
        const name = Name;
         alert('name is '  name); 
      }

      return (
        <form className="forms-sample" onSubmit={submitHandler}>
        <div className='flex-dvs'>
          <div className="form-group">
              <h3>Blog title</h3>
            
            <input type="text"
              className="form-control"
              id="exampleInputName1"
              placeholder="Title"
              name="name"
              value={state.name}
              onChange={handleChange}
            />
  
          </div>
            </div>
            <div className='save-btn text-right'>
          <button className='btn btn-primary mr-2'>Save</button>
        </div>
      </form>
      )

}

CodePudding user response：

You are setting the state variable. So use state.name instead of Name

const name = state.name;