import React, { useState } from 'react'; import { make, ruleIn } from 'simple-body-validator'; import './style.css'; // Form initial Data const initialData = { name: '', age: '', movie: '', }; // Set the rules to be used for the form validation const rules = { name: ['required', 'string', 'min:3', 'max:255'], age: ['required', 'integer', 'min:18', 'max:64'], movie: ['required', ruleIn(['star-wars', 'vanilla-sky', 'atomic-blonde'])], }; // Initiate a new validator instance const validator = make(initialData, rules); // Set initial errors const initalErrors = validator.errors(); export default function App() { // Set state with initial data const [data, setData] = useState(initialData); const [errors, setErrors] = useState(initalErrors); const { name, age, movie } = data; // Update form data const handleInputChange = ({ target: { name, value } }) => { setData({ ...data, [name]: value }); validator.validate(name, value); setErrors(validator.errors()); }; const handleSubmit = (event) => { event.preventDefault(); validator.setData(data).validate(); setErrors(validator.errors()); }; return ( ); }