title: I can't change the state of the input tag when click on submit button and when it's empty of fill with text?
body: <p>Here I built a form and I want, when I click on submit button <br> if title part(input with id form-title) is empty border of the input gets a specific className but <br>
  It doesn't work <br>
  I uploaded an image and specify the submit button and input of title
  My purpose is when I click on submit button the code must check the inside of the input tag(title) and if it's empty(I mean equal to &quot;&quot; ) the border of the input become red else become green</p>
  <pre><code>import { useState } from &quot;react&quot;;
  import &quot;./tickets.css&quot;;
  
  export default function Tickets() {
  // States
  const [toggle_new_ticket, setToggle_new_ticket] = useState(false);
  const [form_title, set_form_title] = useState(&quot;&quot;);
  const [form_unit, set_form_unit] = useState(&quot;&quot;);
  const [form_explain, set_form_explain] = useState(false);
  let [check, setCheck] = useState(&quot;&quot;);
  
  // States functions
  const form_checker = () =&gt; {
      setCheck(() =&gt; {
          if (form_title == &quot;&quot;) {
              check = false;
          } else {
              check = true;
          }
          console.log(check);
      });
  };
  
  return (
      &lt;div className=&quot;tickets-container&quot;&gt;
          {/* New Ticket section */}
          &lt;div className=&quot;tickets-new-ticket-container&quot;&gt;
              {/* New Ticket Title */}
              &lt;div
                  className=&quot;tickets-new-ticket-title&quot;
                  onClick={(e) =&gt; {
                      setToggle_new_ticket(!toggle_new_ticket);
                  }}
              &gt;
                  &lt;div className=&quot;new-ticket-image&quot;&gt;
                      &lt;img src=&quot;https://img.icons8.com/external-tanah-basah-glyph-tanah-basah/48/000000/external-plus-user-interface-tanah-basah-glyph-tanah-basah-2.png&quot; /&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;new-ticket-title&quot;&gt;
                      &lt;sapn&gt; ثبت درخواست جدید&lt;/sapn&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              {/* New Ticket Form */}
              {toggle_new_ticket ? (
                  &lt;div className=&quot;tickets-new-ticket-form-container&quot;&gt;
                      {/* Form top container */}
                      &lt;div className=&quot;tickets-new-ticket-form-top-container&quot;&gt;
                          {/* Form title part */}
                          &lt;div className=&quot;new-ticket-form-title&quot;&gt;
                              &lt;label htmlFor=&quot;form-title&quot;&gt;عنوان&lt;/label&gt;
                              &lt;input
                                  onChange={(e) =&gt; {
                                      set_form_title(e.target.value);
                                  }}
                                  className={check ? &quot;form-correct&quot; : &quot;form-alarm&quot;}
                                  type=&quot;text&quot;
                                  name=&quot;form-title&quot;
                                  id=&quot;form-title&quot;
                                  required
                                  value={form_title}
                                  title=&quot;عنوان مورد نظرتان را وارد کنید&quot;
                                  {...console.log(check)}
                              /&gt;
                              &lt;span&gt;current state of title:{}&lt;/span&gt;
                          &lt;/div&gt;
                          {/* Form unit part */}
                          &lt;div className=&quot;new-ticket-form-unit&quot;&gt;
                              &lt;label htmlFor=&quot;form-unit&quot;&gt;واحد&lt;/label&gt;
                              &lt;select name=&quot;form-unit&quot; id=&quot;form-unit&quot; required&gt;
                                  &lt;option value disabled selected className=&quot;form-unit-header&quot;&gt;
                                      واحد مورد نظر را انتخاب کنید
                                  &lt;/option&gt;
                                  &lt;option value=&quot;پیگیری سفارش&quot;&gt;پیگیری سفارش&lt;/option&gt;
                                  &lt;option value=&quot;احراز هویت&quot;&gt; احراز هویت&lt;/option&gt;
                                  &lt;option value=&quot;مالی&quot;&gt;مالی &lt;/option&gt;
                                  &lt;option value=&quot;سایر&quot;&gt;سایر &lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      {/* Form order part */}
                      &lt;div className=&quot;new-ticket-form-order&quot;&gt;
                          &lt;label htmlFor=&quot;form-order&quot;&gt;در خصوص سفارش&lt;/label&gt;
                          &lt;select name=&quot;form-order&quot; id=&quot;form-order&quot;&gt;
                              &lt;option value=&quot;&quot;&gt;هیچکدام&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                      {/* Form explain part */}
                      &lt;div className=&quot;new-ticket-form-explain&quot;&gt;
                          &lt;label htmlFor=&quot;form-explain&quot;&gt;توضیحات&lt;/label&gt;
                          &lt;textarea
                              name=&quot;form-explain&quot;
                              id=&quot;form-explain&quot;
                              cols=&quot;60&quot;
                              rows=&quot;10&quot;
                              value={form_explain}
                              onChange={(e) =&gt; {
                                  set_form_explain(e.target.value);
                              }}
                          &gt;&lt;/textarea&gt;
                      &lt;/div&gt;
                      {/* ّForm upload file part */}
                      &lt;div className=&quot;new-ticket-form-upload-file&quot;&gt;
                          &lt;label htmlFor=&quot;&quot;&gt;فایل پیوست&lt;/label&gt;
                          &lt;label htmlFor=&quot;form-upload&quot; className=&quot;form-upload&quot;&gt;
                              &lt;span&gt;انتخاب فایل&lt;/span&gt;
                              &lt;img src=&quot;https://img.icons8.com/metro/20/000000/upload.png&quot; /&gt;
                          &lt;/label&gt;
                          &lt;input type=&quot;file&quot; name=&quot;form-upload&quot; id=&quot;form-upload&quot; /&gt;
                          &lt;span className=&quot;form-upload-explain&quot;&gt;
                              پسوندهای مجاز: jpg, jpeg, png, pdf, doc, docx, zip, rar حداکثر
                              حجم فایل 5 مگابایت
                          &lt;/span&gt;
                      &lt;/div&gt;
                      {/* Form submit btn */}
                      &lt;div className=&quot;new-ticket-form-submit&quot;&gt;
                          &lt;input
                              type=&quot;submit&quot;
                              name=&quot;form-submit&quot;
                              id=&quot;form-submit&quot;
                              value=&quot;ارسال درخواست&quot;
                              onClick={() =&gt; {
                                  form_checker();
                              }}
                          /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              ) : (
                  &quot;&quot;
              )}
          &lt;/div&gt;
          {/* Tickets log section */}
          &lt;div className=&quot;tickets-log-container&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  );}
  </code></pre>
  <p><a href="https://i.stack.imgur.com/nVy6L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nVy6L.png" alt="enter image description here" /></a></p>