Code example used for the KendoReact article: React Basics: React Forms Examples

Form.js

import React, { useState } from 'react';

export function Form() {
  const [formData, setFormData] = useState({
    username: '',
    password: '',
    errors: [],
    loading: false,
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevState) => ({ ...prevState, [name]: value }));
  };

  const validateForm = () => {
    const errors = {};
    // Check if username is empty
    if (!formData.username) {
      errors.username = 'Username is required';
    }
    // Check if password is empty
    if (!formData.password) {
      errors.password = 'Password is required';
    }
    setFormData((prevState) => ({ ...prevState, errors }));
    // Return true if there are no errors
    return Object.keys(errors).length === 0;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setFormData({
      ...formData,
      loading: true,
    });

    // Simulate form submission delay
    setTimeout(() => {
      console.log(formData);
      setFormData({
        ...formData,
        loading: false,
      });
    }, 2000);
  };

  return (
    <form onSubmit={handleSubmit} autocomplete="off">
      <label>
        Username:
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
        {formData.errors.username && (
          <p style={{ color: 'red' }}>{formData.errors.username}</p>
        )}
      </label>
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
        {formData.errors.password && (
          <p style={{ color: 'red' }}>{formData.errors.password}</p>
        )}
      </label>
      <input type="submit" value="Submit" disabled={formData.loading} />
      {formData.loading && (
        <div style={{ marginTop: 5, fontWeight: 'bold' }}>Loading...</div>
      )}
    </form>
  );
}