02-Stu-FunWithForms

components-Form-index.js

import React, { useState } from 'react';
import './style.css';

function Form() {
    // Setting initial state to an object
    const [formData, setFormData] = useState({ firstName: '', lastName: '', password: '' });
    // formData = { firstName: '', lastName: '' }

    const handleInputChange = (event) => {
        // Getting the value and name of the input which triggered the change
        const { name, value } = event.target;
        // value = event.target.value;
        // name = event.target.name; // value of "name" attribute of the input, can be firstName or lastName

        // Updating the input's state

        if (!(name === 'password' && value.length > 15)) {
            // when firstName is updated, we want to do
            // setFormData({ firstName: value, lastName: formData.lastName, password: formData.password })

            // when lastname is updated, we want to do
            // setFormData({ firstName: formData.firstName, lastName: value, password: formData.password })

            // when password is updated, we want to do
            // setFormData({ firstName: formData.firstName, lastName: formData.lastName, password: value })

            // { ...formData } => { firstName: formData.firstName, lastName: formData.lastName, password: formData.password }
            // when name = firstName
            //      => { ...formData, firstName: value } => from line 34
            //      => { firstName: formData.firstName, lastName: formData.lastName, password: formData.password, firstName: value }
            // when name = lastName
            //      => { ...formData, lastName: value } => from line 34
            //      => { firstName: formData.firstName, lastName: formData.lastName, password: formData.password, lastName: value }
            // when name = password
            //      => { ...formData, password: value } => from line 34
            //      => { firstName: formData.firstName, lastName: formData.lastName, password: formData.password, password: value }
            setFormData({ ...formData, [name]: value });
        }
    };

    const handleFormSubmit = (event) => {
        // Preventing the default behavior of the form submit (which is to refresh the page)
        event.preventDefault();

        // Alert the user their first and last name, clear `formData.firstName` and `formData.lastName`, clearing the inputs
        if (formData.firstName === '' || formData.lastName === '') {
            alert('Fill out your first and last name, please!');
        } else if (formData.password.length < 6) {
            alert(`Choose a more secure password, ${formData.firstName} ${formData.lastName}!`)
        } else {
            alert(`Hello ${formData.firstName} ${formData.lastName}`);
        }

        setFormData({
            firstName: '',
            lastName: '',
            password: '',
        });
    };

    // Notice how each input has a `value`, `name`, and `onChange` prop
    return (
        <div>
            <p>
                Hello {formData.firstName} {formData.lastName}
            </p>
            <form className="form">
                <input
                    value={formData.firstName}
                    name="firstName"
                    onChange={handleInputChange}
                    type="text"
                    placeholder="First Name"
                />
                <input
                    value={formData.lastName}
                    name="lastName"
                    onChange={handleInputChange}
                    type="text"
                    placeholder="Last Name"
                />
                <input
                    value={formData.password}
                    name="password"
                    onChange={handleInputChange}
                    type="password"
                    placeholder="Password"
                />
                <button type="button" onClick={handleFormSubmit}>
                    Submit
                </button>
            </form>
        </div>
    );
}

export default Form;