title: Controlled form: display a div if invalid input
body: <p>For a training, I'am trying to check if the input value of this code base includes a &quot;@&quot; when <code>onBlur</code>:</p>
  <pre><code>&lt;form&gt;
    &lt;input
      type='text'
      name='my_input'
      value={inputValue}
      onChange={(e) =&gt; setInputValue(e.target.value)}
      onBlur={(e) =&gt; checkEmail(e.target.value)}
      &gt;&lt;/input&gt;
    &lt;button&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Therefore I added a function to display a <code>&lt;div&gt;</code> below the form (or at least below the input field) if there is no &quot;@&quot; in the input, but without success: </p>
  <pre><code>function checkEmail(value) {
    if (!value.includes('@')) {
      &lt;div&gt;⚠️ Warning, there is no @, this is not a valid email address.&lt;/div&gt;;
    }
  }
  </code></pre>
  <p>Knowing <code>console.log(!value.includes('@'))</code> well return true. </p>
  <p>Any clue on how to get the <code>&lt;div&gt;⚠️ Warning, there is no @, this is not a valid email address.&lt;/div&gt;</code> shown below the form or input when invalid input?</p>
  <p>Thanks in advance. </p>