ReactJs Forms (1)

import React from 'react';

const App = () => {

  const [fields,setFeilds]= React.useState({});

  const [errors,setErrors]= React.useState({});

  const validate = () =>{

    let is_error = false;

    let error_list = {};

    if(!fields.name){

      error_list.name = 'please enter the name';

      is_error = true;

    }

    if(!fields.age){

      error_list.age = 'please enter the age';

      is_error = true;

    }

    if(!fields.city){

      error_list.city = 'please select the city';

      is_error = true;

    }

    if(!fields.address){

      error_list.address = 'please enter the address';

      is_error = true;

    }

    if(is_error){

      setErrors(error_list);

      return true;

    }

    return false;

  }

  const handleChange = (event) =>{

    setFeilds({...fields,[event.target.name]:event.target.value});

    validate();

    //console.log(event.target.value);

  }

  const handleSubmit = (event)=>{

    event.preventDefault();

    if(validate()){

      console.log(errors);

    }else{

      console.log('submitted!');

    }

  }

  return (

    <div className="container" >

      <h1 >React Forms</h1>

      <form onSubmit={handleSubmit}>

        <p>

          Name : <br /><input type="text" name="name" onChange={handleChange} />

        </p>

        {errors.name && (<p className="error">{errors.name}</p>)}

        <p>

          Age : <br /><input type="text" name="age" onChange={handleChange}/>

        </p>

        {errors.age && (<p className="error">{errors.age}</p>)}

        <p>

          Address : <br /><input type="text" name="address" onChange={handleChange}/>

        </p>

        {errors.address && (<p className="error">{errors.address}</p>)}

        <p>

          City :<br />

          <select name="city" onChange={handleChange}>

            <option></option>

            <option>Noida</option>

            <option >Delhi</option>

            <option>Chandigarh</option>

          </select>

        </p>

        {errors.city && (<p className="error">{errors.city}</p>)}

        <p>

          Gender :<br />

          <input type="radio" id="male" name="gender" value="male"  onChange={handleChange}/>{" "}

          <label htmlFor="male">male</label>

          <input type="radio" id="female" name="gender" value="female" onChange={handleChange}/>{" "}

          <label htmlFor="female">female</label>

        </p>

        <p>

          Message:

          <br />

          <textarea name="about" onChange={handleChange} ></textarea>

        </p>

        <p>

          <input

            type="checkbox"

            name="confirm"

            id="confirm"

            onChange={handleChange}

          />{" "}

          <label htmlFor="confirm">please confirm </label>

        </p>

        <p>

          <input type="submit" name="save" value="save" />

        </p>

      </form>

      {JSON.stringify(fields)}

    </div >

  )

}

export default App;