Ternary operator is not working in react js render function

Question

We have a simple return render operation and we are deceding the return html using ternary operator, on the basis of state variable(anyException) value. Code snippet is shown below :

 return <Form
        validate={ formValidation }
        onSubmit={this.onSubmit}
        initialValues={initialValues}
        render={({ handleSubmit,  submitting,  valid }) => (<form onSubmit={handleSubmit} className="k-form">

            <div className="container-fixed">
            (this.state.anyException ?  
                    <ErrorDialogPopup
                    anyException={this.state.anyException}
                    errorInfo={this.state.errorInfo}
                    toggleErrorDialog={this.toggleErrorDialog.bind(this)}
                    /> : <div className="row">
                {this.state.errorMessages.map(function(errorMessage) {
                    return <div className="errorMessage">{errorMessage}</div>
                })}
                </div>)

                <div>

                    <div className="row">
                        <div className="col-sm-12">
                            <div className="panel panel-default" id="frmNetworkAdd">
                                <div className="panel-heading">
                                    <h1 className="panel-title" id="panelHeader">
                                        {this.state.networkId === -1? <span>Add Network</span> : <span>Edit Network</span>}
                                    </h1>
                                </div>

But during run time, both the cases getting displayed. Could you please suggest what is going wrong here.

if we not using it then this.state.. displays as normal html string — mayank
– mayank, Commented Sep 18, 2018 at 17:38
Can you provide more information ? Like what is the value of this.state.errorMessages and the output which your are seeing ? — Ayushya
– Ayushya, Commented Sep 18, 2018 at 18:25
ok, Ternary first case shows a simple error dialog box and second case shows a simple error message on same page — mayank
– mayank, Commented Sep 18, 2018 at 18:28

larz · Accepted Answer · 2019-03-07 15:46:12Z

1

Instead of wrapping your ternary in (), use {} instead.

<div className="container-fixed">
  {this.state.anyException ?  
    <ErrorDialogPopup
      anyException={this.state.anyException}
      errorInfo={this.state.errorInfo}
      toggleErrorDialog={this.toggleErrorDialog.bind(this)}
    /> : <div className="row">
      {this.state.errorMessages.map(function(errorMessage) {
        return <div className="errorMessage">{errorMessage}</div>
      })}
    </div>
  }
</div>

edited Mar 7, 2019 at 15:46

answered Sep 18, 2018 at 17:44

larz

5,7662 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ternary operator is not working in react js render function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related