JS / JSX function always returns true even if it's false

Question

I have a function in ReactJS that checks if string.trim() === "". The function should return false if none of the trimmed strings are equal to "", but it always returns true.

I take those strings from state.

import React, {Component} from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import './Contact.scss'

export default class Contact extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      email: "",
      subject: "",
      message: ""
    }
  }

  setName = (e) => {
    this.setState({name: e.target.value});
  };
  setEmail = (e) => {
    this.setState({email: e.target.value});
  };
  setSubject = (e) => {
    this.setState({subject: e.target.value});
  };
  setMessage = (e) => {
    this.setState({message: e.target.value});
  };

  validate = () => {
    const { name, email, subject, message } = this.state;
    return name.trim() === "" ||
      email.trim() === "" ||
      subject.trim() === "" ||
      message.trim() === "";
  };

  render() {
    const { name, email, subject, message } = this.state;
    return (
      <div id="Contact" className="Wrapper-contact">
        <div className="Contact-container">
          <div className="Contact-title">
            HIT ME UP
          </div>
          <div className="Contact-content">
            <form className="Form" action="https://formspree.io/a@gmail.com" method="POST">
              <div className="Form-group">
                <label>NAME</label>
                <input
                  className="Form-field"
                  name="Name"
                  placeholder="Your Name"
                  value={name}
                  onChange={this.setName}
                />
              </div>
              <div className="Form-group">
                <label>EMAIL</label>
                <input
                  className="Form-field"
                  name="_replyto"
                  placeholder="Your Email"
                  value={email}
                  onChange={this.setEmail}
                />
              </div>
              <div className="Form-group">
                <label>SUBJECT</label>
                <input
                  className="Form-field"
                  name="Subject"
                  placeholder="Subject"
                  value={subject}
                  onChange={this.setSubject}
                />
              </div>
              <div className="Form-group">
                <label>MESSAGE</label>
                <textarea
                  className="Form-textarea"
                  name="Message"
                  placeholder="Your Message..."
                  rows="7"
                  value={message}
                  onChange={this.setMessage}
                />
              </div>
              <input type="hidden" name="_next" value="/"/>
              <button
                className="Contact-button"
                type="submit"
                disabled={!!this.validate() ? "true" : "false"}
              >
                SEND
              </button>
            </form>
            <div className="Connect">
              <span style={{padding: '5%'}}>Also, don't forget to connect with me!</span>
              <a className="Connect-in" href="link" target="_blank" rel="noopener noreferrer">
                <FontAwesomeIcon icon={['fab', 'linkedin']} size="2x"/>
              </a>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

And the function still returns true always.

Answer 1

You are not invoking the function, instead you are using its reference. Try to invoke it instead. Also you are using strings in expression blocks like {"true"}. So, it does not work like that. Try like this:

disabled={!!this.validate() ? true : false}

But, as you figured out yourself you can use your function without a ternary condition:

disabled={!!this.validate()}

Since it returns the boolean itself, not the string.

Answer 2

Apparently replacing disabled={!!this.validate() ? "true" : "false"} with disabled={!!this.validate()} did solve the problem.