CODEWITHSUNDEEP
reactjs
user9240010
user9240010

Reputation:

Why is ternary operator in jsx not working

I have a react component and inside that I want to display a sub-component using ternary operator which seems not to be working

This is my code for the same 

import React, {Component} from 'react'
// import HeaderProduct from '../components/header_product.co;ntroller';
import HeaderProduct from './../../../components/header_product.controller';
import FooterController from './../../../components/footer.controller.js';
import  './../../../../css/PandC/customerPolicies.css';
import ImageComponent from "./../imageComponent";
import SandD from "./CPC/SandD.js";
import InShipping from './CPC/Inshipping.js';
import Payments from './CPC/Payments.js';      



class customerPolicies extends Component{

    state = {
        SandD: true,
        Cancellation: false,
        Payments: false,
        EandR: false,
        InternationalShipping: false,
        ExpressDelievery: false
    }

    contentToDisplay = (event) => {
        Object.keys(this.state).forEach(key => {
           if(event.target.name == key) {
              this.setState({[event.target.name]: true})
           } else {
               this.setState({[key]: false})   
           }
        })

    }

    render(){

        return(
               <div className="main-class main-container">
               <HeaderProduct />
                <div>
                <ImageComponent />
                </div>
                    <div className="row"> 
                        <div className="sub-headings"> 
                            <button className="btn customer-p-b" name="SandD" onClick={this.contentToDisplay}> Shipping and Delievery </button>
                            <button className="btn customer-p-b" name="Cancellation" onClick={this.contentToDisplay}>Cancellation </button> 
                            <button className="btn customer-p-b" name="Payments" onClick={this.contentToDisplay}>Payments </button>
                            <button className="btn customer-p-b" name="EandR" onClick={this.contentToDisplay}> Exchanges and Returns </button>
                            <button className="btn customer-p-b" name="InternationalShipping" onClick={this.contentToDisplay}> International Shipping </button>
                            <button className="btn customer-p-b" name="ExpressDelievery" onClick={this.contentToDisplay}> Express Delievery </button>
                        </div>
                     <div className="main-content">
                        <div className="header-box">
                         { this.state.SandD ? <SandD /> }

                        </div>
                        <div className="open-box">
                        </div>
                        <div className="close-box">
                        </div>

                    </div>
                </div>
                 <FooterController />
           </div>

        )
    }
}



export default customerPolicies;

Here if my state for Payment is true then I want to display a Payment sub-component.

The state on which is decided through button which puts every other state to false and makes only the current state to be true

<div className="main-content">
    <div className="header-box">
        { this.state.Payments ? <Payments /> }
    </div>

This is the first time I am trying to use Ternary Expression and for some reason the react is throwing error here

{this.state.SandD ? <SandD /> }

[Question:] Can anyone help me in fixing it?

Upvotes: 2

Views: 8630

Answers (3)

Yossi
Yossi

Reputation: 6027

Since there is nothing to display when the tested value is false, Use && instead of ?

Upvotes: 2

kost
kost

Reputation: 730

Option 1:

Add the false case: {this.state.SandD ? <SandD /> : undefined }

Option 2:

Use &&

{this.state.SandD && <SandD /> }

https://reactjs.org/docs/conditional-rendering.html

Upvotes: 5

Shubham Khatri
Shubham Khatri

Reputation: 281646

Ternary operator syntax in your code is not correct. Wou would write 

 { this.state.SandD ? <SandD />: null }

or probably just

 { this.state.SandD && <SandD /> }

Upvotes: 4

Related Questions