React Material-UI Cookbook

How to do it...

Let's say that you have two inputs: a phone number and an email address, and you want to make sure that the values provided by the user are correct.

Please note: Validation isn't perfect. Thankfully, this piece can work, however, you need it to and you'll still get all of the Material-UI pieces.

Here's the code to do it:

import React, { useState } from 'react';import { makeStyles } from '@material-ui/styles';import Grid from '@material-ui/core/Grid';import TextField from '@material-ui/core/TextField';const useStyles = makeStyles(theme => ({  container: { margin: theme.spacing(2) }}));export default function ValidationAndErrorDisplay() {  const classes = useStyles();  const [inputs, setInputs] = useState([    {      id: 'phone', label: ...