jsx React 中的嵌套条件渲染

Question

im attempting to have a nested if condition within the jsx itself. here is a sample of my code:

        {this.props.customerInformation?
           <Descriptions title="Customer Information" bordered>
           {this.props.customerInformation.customer_status.label}</Descriptions.Item>
            </Descriptions>
            :
            <Button> Create a new customer </Button>
            }

What im attempting to do is to add another condition within the top condition, which would look something like that:

            {this.props.customerInformation?
           <Descriptions title="Customer Information" bordered>
          <Descriptions.Item>
           {this.props.customerInformation.customer_status.label}
          </Descriptions.Item>

               <Description.Item>
             {this.props.customerInformation.poc?
              <Descriptions title="poc" > 
              {this.props.customerInformation.poc}
              <Descriptions.Item>
             </Descriptions>
            :
            <Button> Create a new customer </Button>
            }

Answer 1

add brackets to wrap your code.

 {this.props.customerInformation?
           (<Descriptions title="Customer Information" bordered>
              {this.props.customerInformation.customer_status.label} 
               </Descriptions.Item>
            </Descriptions>)
            :
            (<Button> Create a new customer </Button>)
}