I was submitting the form in react but it was not taking the first submit, it was showing blank. And required attribute is also not working

Question

This is the code .

const Details = () => {
const [counter, setCounter] = useState(1)

ques state for getting all the values of the form, and details state for storing all the submitions.

const [details, setDetails] = useState([])
const [ques, setQues] = useState({
    question: "",
    option1: "",
    option2: "",
    option3: "",
    option4: "",
    correct_option: ""
})

Handel change here.

const handelChange = (e) => {
    const name = e.target.name
    const value = e.target.value
    setQues({ ...ques, [name]: value })
}

Here I am submitting the form: first input was totaly blank in details

const handelSubmit = (e) => {
    e.preventDefault()
    setDetails([...details, ques])
    console.log(details)
    setQues({ question: "", option1: "", option2: "", option3: "", option4: "", correct_option: "" })
}

return (
    <div className="details-cont">
        <div className="details">

Form: required field is not working.

            <form >
                <div className="input_cont">
                    <label htmlFor="question">Question: {counter}</label>
                    <input required type="text" onChange={handelChange} value={ques.question} name="question" id="question" placeholder="Enter the question" />
                </div>
                <div className="input_cont">
                    <label htmlFor="option1">Option 1:</label>
                    <input type="text" required onChange={handelChange} value={ques.option1} name="option1" id="option1" placeholder="Enter the Option 1" />
                </div>
                <div className="input_cont">
                    <label htmlFor="option2">Option 2:</label>
                    <input type="text" required onChange={handelChange} value={ques.option2} name="option2" id="option2" placeholder="Enter the Option 2" />
                </div>
                <div className="input_cont">
                    <label htmlFor="option3">Option 3:</label>
                    <input type="text" required onChange={handelChange} value={ques.option3} name="option3" id="option3" placeholder="Enter the Option 3" />
                </div>
                <div className="input_cont">
                    <label htmlFor="option4">Option 4:</label>
                    <input type="text" required onChange={handelChange} value={ques.option4} name="option4" id="option4" placeholder="Enter the Option 4" />
                </div>
                <div className="toggle_cont">
                    <input className="correct_opt" required name="correct_option" type="number" onChange={handelChange} value={ques.correct_option} min="1" max="4" placeholder="correct option" />
                    <button onClick={handelSubmit} className="btn btn-add">Add</button>
                </div>
            </form>
            <button className="btn btn-create">Create</button>
        </div>
        <div className="d-left">
            Make your MCQ QUESTIONS on a GO!
        </div>
    </div >
)

}

Answer 1

Actually native html validations are not going to work as long as you submit your form through <form> tag. Currently you are just submitting on click of button.

You can change it like:

<form onSubmit={handleSubmit}>
  {/* ... other fields ... */}
  <div className="toggle_cont">
     <input className="correct_opt" required name="correct_option" type="number" onChange={handelChange} value={ques.correct_option} min="1" max="4" placeholder="correct option" />
     <button type="submit" className="btn btn-add">Add</button>
   </div>
</form>