CODEWITHSUNDEEP
reactjs
Darkpsinight
Darkpsinight

Reputation: 659

Converting a <button> with condition into an <input>

I have a contact form, made with <input>s and a <button>. I changed the <button> to <input>, but now i dont know how to add my condition {loading ? "Sending 💌" : "Send Message"} inside this input. Any good solution?

my contact form code:

      <form
        className="app__footer-form app__flex"
        ref={form}
        onSubmit={sendEmail}
      >
        {!isFormSubmitted ? (

            //button to remove
            <button type="button" className="p-text" onClick={handleSubmit}>
              {loading ? "Sending 💌" : "Send Message"}
            </button>

            //input to use with condition {loading ? "Sending 💌" : "Send Message"}
            <input type="submit" value="Send" className="button" onClick={handleSubmit} />
          </div>
        ) : (
          <div>
            <h3 className="head-text">Thank you in getting in touch!</h3>
          </div>
        )}
      </form>

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.

Upvotes: 0

Views: 25

Answers (1)

David
David

Reputation: 219047

Well, when rendering this button, what specifies the text of the button?:

<input type="submit" value="Send" className="button" onClick={handleSubmit} />

The rendered text on the button is Send. So one can conclude that the value attribute specifies the text displayed. So that's where you'd conditionally place your text:

<input type="submit" value={loading ? "Sending 💌" : "Send Message"} className="button" onClick={handleSubmit} />

Upvotes: 2

Related Questions