cbrannen9a

import React, { useState } from 'react';

function Example() {
	// Declare a new state variable, which we'll call "count"
	const [count, setCount] = useState(0);

	return (
		<div>
			<p>You have written {count} hooks</p>
			<button onClick={() => setCount(count + 1)}>

cbrannen9a

{
	"extends": "react-app",
	"plugins": [
		"react-hooks"
	],
	"rules": {
		"react-hooks/rules-of-hooks": "error"
	}
}

cbrannen9a

const validateCardNumber = (number) => {
	var regex = new RegExp("^[0-9]{16}$");
	if (!regex.test(number)) { return false; }

	return luhnCheck(number);
}

const luhnCheck = (val) => {
	var sum = 0;
	for (var i = 0; i < val.length; i++) {

cbrannen9a

handleValid = () => {
		const { activeStep, validation } = this.state;
		if (activeStep === 0 && !validation.hasErrorAddressForm) {
			return false;
		} else if (activeStep === 2) {
			return false;
		}
		return true;
	}
//...

cbrannen9a

export const formValidator = (validation, area) => {
	if (area === 'addressForm') {
		return !validation.firstName
			|| !validation.lastName
			|| !validation.address1
			|| !validation.city
			|| !validation.zip
			|| !validation.country
	}
	return true;

cbrannen9a

handleFormValidation = () => {
		const { validation } = this.state;
		this.setState({
			validation: {
				...validation,
				hasErrorAddressForm: formValidator(validation, 'addressForm'),
			}
		});
	}

cbrannen9a

function AddressForm(props) {
	const { state, handleChange } = props;

	return (
		<Fragment>
			<Typography variant="h6" gutterBottom>
				Shipping address
      		</Typography>
			<Grid container spacing={24}>
				<Grid item xs={12} sm={6}>

cbrannen9a

export const fieldValidator = (name, value) => {

	let valid = false;
	let message = '';

	switch (name) {
		case 'firstName':
			valid = value.trim().length > 0;
			message = validatorMessage(
				valid,

cbrannen9a

handleChange = (name, area) => event => {
		const value = event.target.value;
		this.setState({
			[area]: {
				...this.state[area],
				[name]: value
			}
		}, () => { this.handleValidation(name, value); });
	}

cbrannen9a

function AddressForm(props) {
	const { state, handleChange } = props;

	return (
		<Fragment>
			<Typography variant="h6" gutterBottom>
				Shipping address
      		</Typography>
			<Grid container spacing={24}>
				<Grid item xs={12} sm={6}>