title: Rendering input Error message is not working properly
body: <p>below is a form which if u click the submit button , any input field that is not entered is suppose to render an error (or a warning) message that field need to be entered , but seems through trials , that it doesnt matter if entered a value or not the same message will still show , what am i doing wrong, your feedback is appreciated.</p>
  <pre><code>import { FC, useRef, useState } from &quot;react&quot;;
  
  
  const isEmpty = (value: string) =&gt; value.trim() === &quot;&quot;;
  
  const FranchiseApplication: FC = () =&gt; {
    const [formInputsValidity, setFormInputsValidity] = useState({
      firstname: true,
      lastname: true,
      city: true,
      state: true,
      zip: true,
      networth: true,
      liquidcap: true,
      heardabout: true,
      tellabout: true,
      cancontact: true,
    });
  
    const firstnameInputRef = useRef&lt;HTMLInputElement&gt;(null);
    const lastnameInputRef = useRef&lt;HTMLInputElement&gt;(null);
    const cityInputRef = useRef&lt;HTMLInputElement&gt;(null);
    const stateInputRef = useRef&lt;HTMLSelectElement&gt;(null);
    const zipInputRef = useRef&lt;HTMLInputElement&gt;(null);
    const networthInputRef = useRef&lt;HTMLSelectElement&gt;(null);
    const liqcapInputRef = useRef&lt;HTMLSelectElement&gt;(null);
    const hearaboutusInputRef = useRef&lt;HTMLSelectElement&gt;(null);
    const tellaboutusInputRef = useRef&lt;HTMLInputElement&gt;(null);
    const cancontactInputRef = useRef&lt;HTMLInputElement&gt;(null);
  
    const FranchiseHandler = (e: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
      e.preventDefault();
      const enteredFirstName: string | undefined =
        firstnameInputRef.current?.value || &quot;&quot;;
      const enteredLastName: string | undefined =
        lastnameInputRef.current?.value || &quot;&quot;;
      const enteredCity: string | undefined = cityInputRef.current?.value || &quot;&quot;;
      const enteredState: string | undefined = stateInputRef.current?.value || &quot;&quot;;
      const enteredZip: string | undefined = zipInputRef.current?.value || &quot;&quot;;
      const enteredNetworth: string | undefined =
        networthInputRef.current?.value || &quot;&quot;;
      const enteredLiqCap: string | undefined =
        liqcapInputRef.current?.value || &quot;&quot;;
      const enteredHearAbout: string | undefined =
        hearaboutusInputRef.current?.value || &quot;&quot;;
      const enteredTellAbout: string | undefined =
        tellaboutusInputRef.current?.value || &quot;&quot;;
      const eneterdCanContact: string | undefined =
        cancontactInputRef.current?.value || &quot;&quot;;
  
      const enteredFirtNameIsValid = isEmpty(enteredFirstName);
      const enteredLastNameIsValid = isEmpty(enteredLastName);
      const enteredCityIsValid = isEmpty(enteredCity);
      const enteredStateIsValid = isEmpty(enteredState);
      const enteredZipIsValid = isEmpty(enteredZip);
      const enteredNetworthIsValid = isEmpty(enteredNetworth);
      const enteredLiqCapIsValid = isEmpty(enteredLiqCap);
      const enteredHearAboutValid = isEmpty(enteredHearAbout);
      const enteredTellAboutValid = isEmpty(enteredTellAbout);
      const eneterdCanContactValid = isEmpty(eneterdCanContact);
  
      setFormInputsValidity({
        firstname: enteredFirtNameIsValid,
        lastname: enteredLastNameIsValid,
        city: enteredCityIsValid,
        state: enteredStateIsValid,
        zip: enteredZipIsValid,
        networth: enteredNetworthIsValid,
        liquidcap: enteredLiqCapIsValid,
        heardabout: enteredHearAboutValid,
        tellabout: enteredTellAboutValid,
        cancontact: eneterdCanContactValid,
      });
  
      const formIsValid =
        enteredFirtNameIsValid &amp;&amp;
        enteredLastNameIsValid &amp;&amp;
        enteredCityIsValid &amp;&amp;
        enteredStateIsValid &amp;&amp;
        enteredZipIsValid &amp;&amp;
        enteredNetworthIsValid &amp;&amp;
        enteredLiqCapIsValid &amp;&amp;
        enteredHearAboutValid &amp;&amp;
        enteredTellAboutValid &amp;&amp;
        eneterdCanContactValid;
  
      if (!formIsValid) {
        return;
      } else {
        console.log(
          enteredFirstName,
          enteredLastName,
          enteredCity,
          enteredState,
          enteredZip,
          enteredNetworth,
          enteredLiqCap,
          enteredHearAbout,
          enteredTellAbout,
          eneterdCanContact
        );
      }
    };
  &lt;form className=&quot;w-full&quot; onSubmit={FranchiseHandler}&gt;
            &lt;div className=&quot;flex justify-start w-full mb-4&quot;&gt;
              &lt;div className=&quot;w-1/2 px-3&quot;&gt;
                &lt;label
                  className=&quot;block uppercase tracking-wide text-gray-700 text-xl mb:text-lg font-bold mb-2&quot;
                  htmlFor=&quot;grid-first-name&quot;
                &gt;
                  First Name
                &lt;/label&gt;
                &lt;input
                  className=&quot;appearance-none block w-full bg-gray-200 text-gray-700 border  rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white&quot;
                  id=&quot;grid-first-name&quot;
                  type=&quot;text&quot;
                  placeholder=&quot;Jane&quot;
                  ref={firstnameInputRef}
                /&gt;
                {!formInputsValidity.firstname &amp;&amp; (
                  &lt;p className=&quot;text-red-700 font-bold&quot;&gt;
                    Please enter a valid first name!
                  &lt;/p&gt;
                )}
              &lt;/div&gt;
              &lt;div className=&quot;w-1/2 px-3&quot;&gt;
                &lt;label
                  className=&quot;block uppercase tracking-wide text-gray-700 text-xl mb:text-lg  font-bold mb-2&quot;
                  htmlFor=&quot;grid-last-name&quot;
                &gt;
                  Last Name
                &lt;/label&gt;
                &lt;input
                  className=&quot;appearance-none block w-full bg-gray-200 text-gray-700 border  rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white&quot;
                  id=&quot;grid-last-name&quot;
                  type=&quot;text&quot;
                  placeholder=&quot;Doe&quot;
                  ref={lastnameInputRef}
                /&gt;
                {!formInputsValidity.lastname &amp;&amp; (
                  &lt;p className=&quot;text-red-700 font-bold&quot;&gt;
                    Please enter a valid last name!
                  &lt;/p&gt;
                )}
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div className=&quot;flex justify-start w-full mb-4&quot;&gt;
              &lt;div className=&quot;w-1/3 px-3&quot;&gt;
                &lt;label
                  className=&quot;block uppercase tracking-wide text-gray-700 text-xl mb:text-lg  font-bold mb-2&quot;
                  htmlFor=&quot;grid-city&quot;
                &gt;
                  City
                &lt;/label&gt;
                &lt;input
                  className=&quot;appearance-none block w-full bg-gray-200 text-gray-700 border  rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white&quot;
                  id=&quot;grid-city&quot;
                  type=&quot;text&quot;
                  placeholder=&quot;Albuquerque&quot;
                  ref={cityInputRef}
                /&gt;
                {!formInputsValidity.city &amp;&amp; (
                  &lt;p className=&quot;text-red-700 font-bold&quot;&gt;
                    Please enter a valid city!
                  &lt;/p&gt;
                )}
              &lt;/div&gt;
              &lt;div className=&quot;w-1/3 px-3&quot;&gt;
                &lt;label
                  className=&quot;block uppercase tracking-wide text-gray-700 text-xl mb:text-lg  font-bold mb-2&quot;
                  htmlFor=&quot;grid-state&quot;
                &gt;
                  State
                &lt;/label&gt;
                &lt;div className=&quot;relative&quot;&gt;
                  &lt;select
                    className=&quot;appearance-none block w-full bg-gray-200 text-gray-700 border  rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white&quot;
                    id=&quot;grid-state&quot;
                    ref={stateInputRef}
                  &gt;
                    &lt;option value=&quot;new-mexico&quot;&gt;New Mexico&lt;/option&gt;
                    &lt;option value=&quot;missouri&quot;&gt;Missouri&lt;/option&gt;
                    &lt;option value=&quot;texas&quot;&gt;Texas&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;div className=&quot;pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700&quot;&gt;
                    &lt;svg
                      className=&quot;fill-current h-4 w-4&quot;
                      xmlns=&quot;http://www.w3.org/2000/svg&quot;
                      viewBox=&quot;0 0 20 20&quot;
                    &gt;
                      &lt;path d=&quot;M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z&quot; /&gt;
                    &lt;/svg&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                {!formInputsValidity.state &amp;&amp; (
                  &lt;p className=&quot;text-red-700 font-bold&quot;&gt;
                    Please enter a valid state!
                  &lt;/p&gt;
                )}
              &lt;/div&gt;
              &lt;div className=&quot;w-1/3 px-3&quot;&gt;
                &lt;label
                  className=&quot;block uppercase tracking-wide text-gray-700 text-xl mb:text-lg  font-bold mb-2&quot;
                  htmlFor=&quot;grid-zip&quot;
                &gt;
                  Zip
                &lt;/label&gt;
                &lt;input
                  className=&quot;appearance-none block w-full bg-gray-200 text-gray-700 border  rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white&quot;
                  id=&quot;grid-zip&quot;
                  type=&quot;text&quot;
                  placeholder=&quot;90210&quot;
                  ref={zipInputRef}
                /&gt;
              &lt;/div&gt;
              {!formInputsValidity.zip &amp;&amp; (
                &lt;p className=&quot;text-red-700 font-bold&quot;&gt;
                  Please enter a valid ZIP code!
                &lt;/p&gt;
              )}
            &lt;/div&gt;
            &lt;div className=&quot;flex justify-start w-full mb-4 p-3&quot;&gt;
              &lt;body className=&quot;block uppercase tracking-wide text-gray-700 text-lg mb:text-base font-bold&quot;&gt;
                Let's talk financials! Our Healthy-Smoothie Financial Requirements
                are a minimum net worth of 350k
                &lt;br /&gt; and 150k of that in liquid capital.
              &lt;/body&gt;
            &lt;/div&gt;
            &lt;div className=&quot;flex justify-start w-full mb-4&quot;&gt;
              &lt;div className=&quot;w-1/2 px-3&quot;&gt;
                &lt;label
                  className=&quot;block uppercase tracking-wide text-gray-700 text-xl mb:text-lg  font-bold mb-2&quot;
                  htmlFor=&quot;grid-state&quot;
                &gt;
                  Net Worth
                &lt;/label&gt;
                &lt;div className=&quot;relative&quot;&gt;
                  &lt;select
                    className=&quot;block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500&quot;
                    id=&quot;grid-state&quot;
                    ref={networthInputRef}
                  &gt;
                    &lt;option value=&quot;1&quot;&gt;Less Than $350,000&lt;/option&gt;
                    &lt;option value=&quot;2&quot;&gt;$350,000 to $1,000,000&lt;/option&gt;
                    &lt;option value=&quot;3&quot;&gt;over $1,000,000&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;div className=&quot;pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700&quot;&gt;
                    &lt;svg
                      className=&quot;fill-current h-4 w-4&quot;
                      xmlns=&quot;http://www.w3.org/2000/svg&quot;
                      viewBox=&quot;0 0 20 20&quot;
                    &gt;
                      &lt;path d=&quot;M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z&quot; /&gt;
                    &lt;/svg&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                {!formInputsValidity.networth &amp;&amp; (
                  &lt;p className=&quot;text-red-700 font-bold&quot;&gt;
                    Please select a valid networth!
                  &lt;/p&gt;
                )}
              &lt;/div&gt;
              &lt;div className=&quot;w-1/2 px-3&quot;&gt;
                &lt;label
                  className=&quot;block uppercase tracking-wide text-gray-700 text-xl mb:text-lg  font-bold mb-2&quot;
                  htmlFor=&quot;grid-state&quot;
                &gt;
                  Liquid Capital
                &lt;/label&gt;
                &lt;div className=&quot;relative&quot;&gt;
                  &lt;select
                    className=&quot;block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500&quot;
                    id=&quot;grid-state&quot;
                    ref={liqcapInputRef}
                  &gt;
                    &lt;option value=&quot;1&quot;&gt;Less Than $150,000&lt;/option&gt;
                    &lt;option value=&quot;2&quot;&gt;$150,000 to $500,000&lt;/option&gt;
                    &lt;option value=&quot;3&quot;&gt;over $500,000&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;div className=&quot;pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700&quot;&gt;
                    &lt;svg
                      className=&quot;fill-current h-4 w-4&quot;
                      xmlns=&quot;http://www.w3.org/2000/svg&quot;
                      viewBox=&quot;0 0 20 20&quot;
                    &gt;
                      &lt;path d=&quot;M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z&quot; /&gt;
                    &lt;/svg&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              {!formInputsValidity.liquidcap &amp;&amp; (
                &lt;p className=&quot;text-red-700 font-bold&quot;&gt;
                  Please select a liquidity cap!
                &lt;/p&gt;
              )}
            &lt;/div&gt;
            &lt;div className=&quot;w-full mb-4 px-3&quot;&gt;
              &lt;label
                className=&quot;block uppercase tracking-wide text-gray-700 text-xl mb:text-lg  font-bold mb-2&quot;
                htmlFor=&quot;grid-source&quot;
              &gt;
                How Did You Hear About Us ?
              &lt;/label&gt;
              &lt;div className=&quot;relative &quot;&gt;
                &lt;select
                  className=&quot;block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500&quot;
                  id=&quot;grid-source&quot;
                  ref={hearaboutusInputRef}
                &gt;
                  &lt;option value=&quot;1&quot;&gt;Website&lt;/option&gt;
                  &lt;option value=&quot;2&quot;&gt;Social Media&lt;/option&gt;
                  &lt;option value=&quot;3&quot;&gt;Referral&lt;/option&gt;
                  &lt;option value=&quot;4&quot;&gt;Other&lt;/option&gt;
                &lt;/select&gt;
                &lt;div className=&quot;pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700&quot;&gt;
                  &lt;svg
                    className=&quot;fill-current h-4 w-4&quot;
                    xmlns=&quot;http://www.w3.org/2000/svg&quot;
                    viewBox=&quot;0 0 20 20&quot;
                  &gt;
                    &lt;path d=&quot;M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z&quot; /&gt;
                  &lt;/svg&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              {!formInputsValidity.heardabout &amp;&amp; (
                &lt;p className=&quot;text-red-700 font-bold&quot;&gt;
                  Please select how you heard about us method!
                &lt;/p&gt;
              )}
            &lt;/div&gt;
            &lt;div className=&quot;px-3&quot;&gt;
              &lt;label
                className=&quot;block uppercase tracking-wide text-gray-700 text-xl mb:text-lg  font-bold mb-2&quot;
                htmlFor=&quot;grid-tellus&quot;
              &gt;
                TELL US ABOUT YOU
              &lt;/label&gt;
              &lt;input
                id=&quot;grid-tellus&quot;
                type=&quot;text&quot;
                ref={tellaboutusInputRef}
                className=&quot;appearance-none block w-full h-40 bg-gray-200 text-gray-700 border  rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white&quot;
              /&gt;
            &lt;/div&gt;
            {!formInputsValidity.heardabout &amp;&amp; (
              &lt;p className=&quot;text-red-700 font-bold&quot;&gt;
                Please tell us about yourself!
              &lt;/p&gt;
            )}
            &lt;div className=&quot;form-check px-3&quot;&gt;
              &lt;input
                className=&quot;form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer&quot;
                type=&quot;checkbox&quot;
                value=&quot;&quot;
                id=&quot;flexCheckDefault&quot;
                ref={cancontactInputRef}
              /&gt;
              &lt;label
                className=&quot;block uppercase tracking-wide text-gray-700 text-xl mb:text-lg  font-bold my-5&quot;
                htmlFor=&quot;flexCheckDefault&quot;
              &gt;
                Healthy-Smoothie can contact me via text message.
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;div className=&quot;flex justify-center items-center mt-5&quot;&gt;
              &lt;button className=&quot;lgbt secondarybt ph:mdbt&quot; type=&quot;submit&quot;&gt;
                SUBMIT
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>