Condtional Renderin React using If-else not working

Question

i'm new at React, i want to ask about contidional recndering, i'm making project about sending message, and i use validation to check all field is not empty, when one field is empty it should show error message that message not send. I using if-else to render the error message, but it doesn't work.

Here i add my code

....

export default class Message extends React.Component {
  constructor(props){
    super(props);
      this.state = {
        isLoggedIn: SystemStore.isLoggedIn(),
        profile: ProfileStore.getProfile(),
        fullName: SystemStore.systemUser().fullName,
        site: '',
        email: '',
        phone: '',
        subject: '',
        description: '',
        type: '',
        errorMessage: '',
        errorDialog: '',
        isSubmited: false,
        successMessage: '',
        submitting: false
      };

    this.clearForm = this.clearForm.bind(this);
    this.handleProfileChange = this.handleProfileChange.bind(this);
    this.handleSubjectChange = this.handleSubjectChange.bind(this);
    this.handleMessageChange = this.handleMessageChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleSubmitComplete = this.handleSubmitComplete.bind(this);
    this.handleSubmitError = this.handleSubmitError.bind(this);
  }

  componentDidMount(){
    ProfileStore.addProfileChangeListener(this.handleProfileChange);
      if(!this.state.profile){
        ProfileActions.reload()
      }
      
    MessageStore.addSubmitMessageChangeListener(this.handleSubmitComplete);
    MessageStore.addSubmitMessageFailChangeListener(this.handleSubmitError);
  }    

  componentWillUnmount(){
    ProfileStore.removeProfileChangeListener(this.handleProfileChange);
    MessageStore.removeSubmitMessageChangeListener(this.handleSubmitComplete);
    MessageStore.removeSubmitMessageFailChangeListener(this.handleSubmitError);
  }

  render(){
    return(
      <Layout>
        <div className='hs-dashboard row'>
          <div className='col-md-12'>
            <div className='col-xs-12 col-sm-6 col-md-5'>
              <div className='col-xs-12 hs-message-form'>
                <div className='row hs-message-form-head'>
                  <div className='hs-message-form-logo-container'>
                    <img className='col hs-message-form-logo' src='../../images/gii-logo-black.png'/>
                      <text className='hs-message-form-logo-label'>{T.translate('gii')}</text>
                  </div>
                  <div className='hs-message-form-label'>
                    { T.translate('message.title') }
                  </div>
                  <div className='hs-message-form-label-1'>
                    { T.translate('message.subtitle') }
                  </div>
                </div>
                <div className='row hs-message-form-body'>
                  <form className='hs-message-form-body-content'>
                    <label>
                      { T.translate('message.type') }
                    </label>
                    <select
                      id="subject"
                      value={ this.state.subject }
                      onChange={ this.handleSubjectChange }
                      className="form-control"
                      required="true"
                    >
                      <option value="">{ T.translate('placeholder.selectSubject') }</option>
                      <option value="PRAYER">{ T.translate('message.pray') }</option>
                      <option value="ADDRESS">{ T.translate('message.address') }</option>
                      <option value="VISIT">{ T.translate('message.visit') }</option>
                    </select>
                    <label>
                      {T.translate('message.message')}
                    </label>
                    <textarea
                      type="text"
                      id="description"
                      className="form-control"
                      width=''
                      placeholder={ T.translate('placeholder.message') }
                      onChange={ this.handleMessageChange }
                      value={ this.state.description }
                      required
                    />
                    
                    { this.state.errorDialog && 
                      <div className='hs-message-empty'>
                        { this.state.errorDialog }
                      </div>
                    }

                    { this.state.isSubmited === true ?
                      <div className='hs-message-success'>
                        { this.state.successMessage }
                      </div> : 
                      <div className='hs-message-error'>
                        { this.state.errorMessage }
                      </div>
                    }

                    <LaddaButton
                      loading={ this.state.submitting }
                      onClick={ this.handleSubmit }
                      data-spinner-size={ 30 }
                      data-style={ SLIDE_RIGHT }
                    >
                      { T.translate('action.send') }
                    </LaddaButton>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Layout>
    )
  }

  clearForm(){
    this.setState({ subject: '', description: '' });
  }


  handleProfileChange(){
    this.setState({
      site: ProfileStore.getProfile().primarySite.name,
      email: ProfileStore.getProfile().emailAddresses[0].email,
      phone: ProfileStore.getProfile().contactNumbers[0].countryCode + ProfileStore.getProfile().contactNumbers[0].number
    });
  }

  handleSubjectChange(evt){
    this.setState({ subject: evt.target.value }, () => {
      if(this.state.subject === 'PRAYER') {
        this.setState({ type: 'REQUEST' });
      } else if(this.state.subject === 'ADDRESS') {
        this.setState({ type: 'INFORMATION' });
      } else if(this.state.subject === 'VISIT'){
        this.setState({ type: 'REQUEST' });
      }
    });
  }
    
  handleMessageChange(evt){
    this.setState({ description: evt.target.value });
  }

  handleSubmit(evt) {
    evt.preventDefault();
    var errorDialog;
    if(this.state.subject === ''){
      errorDialog = 'Error:' + T.translate('msg.subjectRequired');
    } else if(this.state.description === ''){
      errorDialog = 'Error:' + T.translate('msg.mailDescriptionRequired');
    }

    this.setState({errorDialog: errorDialog});

    this.handleProfileChange();
    this.handleSubjectChange(evt);
    this.handleMessageChange(evt);
    var messageInfo = {
      fullName: this.state.fullName,
      site: this.state.site,
      email: this.state.email,
      phone: this.state.phone,
      subject: this.state.subject,
      description: this.state.description,
      type: this.state.type
    };

    this.setState({ submitting: true }, () => {
      MessageActions.sendMessage(messageInfo);
    });

    console.log(this.state.isSubmited);
  }

  handleSubmitComplete(){
    this.setState({
      submitting: false,
      isSubmited: true,
      errorMessage: null,
      successMessage: T.translate('msg.mailSent')
    });
    this.clearForm();
  }

  handleSubmitError(){
    this.setState({
      submitting: false,
      isSubmited: false,
      errorMessage: T.translate('msg.mailSentFailed'),
      successMessage: null
    });
  }
}

//updated code This is my store.js

....
var MessageStore = assign({}, EventEmitter.prototype, {
   
  emitSubmitMessageChange: function(){
    this.emit(SUBMIT_MESSAGE);
  },

  addSubmitMessageChangeListener: function(callback){
    this.on(SUBMIT_MESSAGE, callback);
  },

  removeSubmitMessageChangeListener: function(callback){
    this.removeListener(SUBMIT_MESSAGE, callback);
  },

  emitSubmitMessageFailChange: function() {
    this.emit(SUBMIT_MESSAGE_FAILED);
  },

  addSubmitMessageFailChangeListener: function(callback) {
    this.on(SUBMIT_MESSAGE_FAILED, callback);
  },

  removeSubmitMessageFailChangeListener: function(callback) {
    this.removeListener(SUBMIT_MESSAGE_FAILED, callback);
  }
});

Dispatcher.register(function(action) {
  switch(action.actionType){
    case MessageConstants.PERFORM_SEND_MESSAGE:
      MessageStore.emitSubmitMessageChange();
      break;

    case MessageConstants.PERFORM_SEND_MESSAGE_FAIL:
      MessageStore.emitSubmitMessageFailChange();
      break;
      
    default:
      //noop
    }

})
export default MessageStore;

And this is my action.js

.....
function _sendMessage(messageInfo, callback) {
  jQuery.ajax({
    method: 'POST',
    url: api('supportTickets'),
    contentType: 'application/json',
    data: JSON.stringify(messageInfo) 
  })
  .done(function(messageInfo) {
    callback(null, messageInfo);
  })
  .fail(function(err){
    console.error('Failed to send message : ' + JSON.stringify(err));
    callback(err, null);
  });
}

var MessageActions = {
  sendMessage: function(messageInfo) {
    _sendMessage(messageInfo, function(err, messageInfo) {
      if(err) {
        Dispatcher.dispatch({
          actionType: MessageConstants.PERFOM_SEND_MESSAGE_FAIL
        });
      }
      Dispatcher.dispatch({
        actionType: MessageConstants.PERFORM_SEND_MESSAGE,
        messageInfo
      });
    });
  }
};

module.exports = MessageActions;

Answer 1

Your form should be responsible for handling errors. You should know your errors at the time of submission of the form.

handleSubmit(evt) {
    evt.preventDefault();
    var errorDialog;
    if(this.state.subject === ''){
      errorDialog = 'Error:' + T.translate('msg.subjectRequired');
    } else if(this.state.description === ''){
      errorDialog = 'Error:' + T.translate('msg.mailDescriptionRequired');
    }

   if (errorDialog) {
      this.setState({
         // set your error here
      })
      return;
   }

   
    this.handleProfileChange();
    this.handleSubjectChange(evt);
    this.handleMessageChange(evt);
    var messageInfo = {
      fullName: this.state.fullName,
      site: this.state.site,
      email: this.state.email,
      phone: this.state.phone,
      subject: this.state.subject,
      description: this.state.description,
      type: this.state.type
    };

    this.setState({ submitting: true }, () => {
      MessageActions.sendMessage(messageInfo);
    });

    console.log(this.state.isSubmited);
  }

Answer 2

Your component seems to be a little complex. Think about breaking your component into smaller components. Using functional components I would do this task in a way something like that.

function validateForm() {
  // validate form logic here. If it's ok, returns true, otherwise, returns false
}

function Message({ form }) {
  if (!validateForm(form)) {
    return (
      <div>Please, fill the empty fields!!</div>
    )
  }

  return (
    <div>All good. Submit the form!!</div>
  )
}