title: Change style of existing input fields whenever error occurs in React Formik
body: <p>In my React Form which I had created using React Formik library, I want to change the style  of my input element's border color to <strong><em>1px solid red</em></strong> whenever there is an error.</p>
  
  <p>But as we know react formik renders a new error component using ErrorMessage whenever it founds a new validation error so basically how do we make a change to our <strong><em>existing input field</em></strong> colour when error occurs? </p>
  
  <p>CSS :</p>
  
  <pre><code>.formGroup input {
    width: 100%;
    border: none;
    border-bottom: 1px solid black;
  }
  .formGroup input:focus {
    outline: none;
  }
  .formGroup button {
    background-color: antiquewhite;
    border-radius: 3px;
    border: none;
    font-size: 15px;
    padding: 10px;
  }
  .error {
    color: red;
    text-align: start;
    font-size: 13px;
  }
  </code></pre>
  
  <p>Code: </p>
  
  <pre><code>import React, { Component } from "react";
  import classes from "./P.module.css";
  import { NavLink } from "react-router-dom";
  import { Formik, Form, Field, ErrorMessage } from "formik";
  import * as Yup from "yup";
  const initialValues = {
    company_name: "",
    company_profile: "The Opinia is news and media company",
    location: "",
    phone_number: "",
    email: "",
    gst: "",
  };
  
  const onSubmit = (values) =&gt; {
    console.log("Form Data: ", values);
  };
  
  // for validation
  const validationSchema = Yup.object({
    company_name: Yup.string().required("Required"),
    company_profile: Yup.string().required("Required"),
    location: Yup.string().required("Required"),
    email: Yup.string().required("Required").email("Invalid email format"),
    phone_number: Yup.number().required("Required"),
    gst: Yup.string().required("Required"),
  });
  export default function Projects2(props) {
    return (
      &lt;div className={classes.main}&gt;
        &lt;Formik
          initialValues={initialValues}
          validationSchema={validationSchema}
          onSubmit={onSubmit}
        &gt;
          &lt;Form className={classes.form}&gt;
            &lt;div className={`${classes.formGroup}`}&gt;
              &lt;label htmlFor="company_name"&gt;Company Name&lt;/label&gt;
              &lt;Field type="text" id="company_name" name="company_name" /&gt;
              &lt;ErrorMessage name="company_name" component={TextError} /&gt;
            &lt;/div&gt;
            &lt;div className={classes.formGroup}&gt;
              &lt;label htmlFor="company_profile"&gt;Company Profile&lt;/label&gt;
              &lt;Field type="text" id="company_profile" name="company_profile" /&gt;
              &lt;ErrorMessage name="company_profile" component={TextError} /&gt;
            &lt;/div&gt;
            &lt;div className={classes.formGroup}&gt;
              &lt;label htmlFor="location"&gt;Location&lt;/label&gt;
              &lt;Field type="text" id="location" name="location" /&gt;
              &lt;ErrorMessage name="location" component={TextError} /&gt;
            &lt;/div&gt;
            &lt;div className={classes.formGroup}&gt;
              &lt;label htmlFor="phone_number"&gt;Phone&lt;/label&gt;
              &lt;Field type="number" id="phone_number" name="phone_number" /&gt;
              &lt;ErrorMessage name="phone_number" component={TextError} /&gt;
            &lt;/div&gt;
            &lt;div className={classes.formGroup}&gt;
              &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
              &lt;Field type="email" id="email" name="email" /&gt;
              &lt;ErrorMessage name="email" component={TextError} /&gt;
            &lt;/div&gt;
            &lt;div className={classes.formGroup}&gt;
              &lt;label htmlFor="gst"&gt;GST Number&lt;/label&gt;
              &lt;Field type="text" id="gst" name="gst" /&gt;
              &lt;ErrorMessage name="gst" component={TextError} /&gt;
            &lt;/div&gt;
  
            &lt;div className={classes.formGroup}&gt;
              &lt;button type="submit"&gt;Submit&lt;/button&gt;
            &lt;/div&gt;
          &lt;/Form&gt;
        &lt;/Formik&gt;
      &lt;/div&gt;
    );
  }
  
  export function TextError(props) {
    return &lt;div className={classes.error}&gt;{props.children}&lt;/div&gt;;
  }
  </code></pre>