React Hook: useState Example

*useState notes for me, myself, and i

• use useState to add state to function components

class component and function component comparison

class component

class Example extends React.Component {
    constructor() {
        super();

        this.state = {
            displayName: '',
            email: '',
        };
    }

    handleChange = (event) => {
        const { name, value } = event.target;

        this.setState({ [name]: value });
    };

    render() {
        const { displayName, email } = this.state;
        return (
            <div className='App'>
                <input
                    type='text'
                    value={displayName}
                    name='displayName'
                    placeholder='username'
                    onChange={this.handleChange}
                    required
                ></input>
                <input
                    type='text'
                    value={email}
                    name='email'
                    placeholder='email'
                    onChange={this.handleChange}
                    required
                ></input>
            </div>
        );
    }}

export default Example;

function component

const Example = () => {
    const [userCredentials, setUserCredentials] = useState({
        displayName: '',
        email: '',
    });

    const handleChange = (event) => {
        const { name, value } = event.target;

        setUserCredentials({ ...userCredentials, [name]: value });
    };

    const { displayName, email } = userCredentials;

    return (
        <div className='App'>
            <input
                type='text'
                value={displayName}
                name='displayName'
                placeholder='username'
                onChange={handleChange}
                required
            ></input>
            <input
                type='text'
                value={email}
                name='email'
                placeholder='email'
                onChange={handleChange}
                required
            ></input>
        </div>
    );
};

export default Example;