title: Converting a <button> with condition into an <input>
body: <p>I have a contact form, made with <code>&lt;input&gt;</code>s and a <code>&lt;button&gt;</code>.
  I changed the <code>&lt;button&gt;</code> to <code>&lt;input&gt;</code>, but now i dont know how to add my condition <code>{loading ? &quot;Sending &quot; : &quot;Send Message&quot;}</code> inside this input. Any good solution?</p>
  <p>my contact form code:</p>
  <pre><code>      &lt;form
          className=&quot;app__footer-form app__flex&quot;
          ref={form}
          onSubmit={sendEmail}
        &gt;
          {!isFormSubmitted ? (
  
              //button to remove
              &lt;button type=&quot;button&quot; className=&quot;p-text&quot; onClick={handleSubmit}&gt;
                {loading ? &quot;Sending &quot; : &quot;Send Message&quot;}
              &lt;/button&gt;
  
              //input to use with condition {loading ? &quot;Sending &quot; : &quot;Send Message&quot;}
              &lt;input type=&quot;submit&quot; value=&quot;Send&quot; className=&quot;button&quot; onClick={handleSubmit} /&gt;
            &lt;/div&gt;
          ) : (
            &lt;div&gt;
              &lt;h3 className=&quot;head-text&quot;&gt;Thank you in getting in touch!&lt;/h3&gt;
            &lt;/div&gt;
          )}
        &lt;/form&gt;
  </code></pre>
  <p>Remark: i added two buttons in the render, the original  that i want to remove and the  that i want to use it with condition.</p>