react JavaScript ternary conditional operation

Question

After I import the data as json from the detail page, in ProductDetail > brand > shoes > size.length get the length length is outputting in JSX.

But there is a problem. There are also products without shoes data for each detailed product on the detail page. I want to treat products without data as 0 instead of length as a ternary operator, but I don't know how to handle it.

<p>{ProductDetail && ProductDetail.brand.shoes.size.length}</p>

But here, data without brand is used using the ternary operator. <p>0</p> : I want to display it like this.

Nike Air Force ProductDetail > brand > shoes > size > length(0,1,2,3,4,5,6) <p>{length}</p>
jordan shoes ProductDetail > brand > shoes > size > length(0,1,2,3,4,5) <p>{length}</p>
adidas shoes ProductDetail > brand > x   -> Handles `<p>0</p>`.

Siva Kondapi Venkata · Accepted Answer · 2021-11-07 04:40:51Z

1

If you need to show 0 when an object is null or parent object is null, Try some like below

<p>{ProductDetail?.brand?.shoes?.size?.length || 0}</p>

Basically with using optional chaining and || operator, The output will be

ProductDetail is null/undefined ==> 0
ProductDetail.brand null/undefined ==> 0
....
ProductDetail.brand.shoes.size has valid array ==> length

let ProductDetail = { brand: { shoes: { size: [2, 3] } } };
console.log(ProductDetail?.brand?.shoes?.size.length || 0);

ProductDetail = null;
console.log(ProductDetail?.brand?.shoes?.size.length || 0);

ProductDetail = { brand: { shoes: null } }
console.log(ProductDetail?.brand?.shoes?.size.length || 0);

answered Nov 7, 2021 at 4:40

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

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

Comments

Adnan Irfan · Accepted Answer · 2021-11-05 04:14:33Z

0

You can use ternary operator and optional chaining like this

<p>{ProductDetail?.brand?.shoes?.size?.length ? ProductDetail.brand.shoes.size.length : null}</p>

answered Nov 5, 2021 at 4:14

Adnan Irfan

312 bronze badges

2 Comments

ssksksks Over a year ago

TypeError: Cannot read properties of undefined( reading '0') Products with null data do not have brand > x.

Felix Kling Over a year ago

ProductDetail?.brand?.shoes?.size?.length ? ProductDetail.brand.shoes.size.length : null and ProductDetail?.brand?.shoes?.size?.length are basically the same. No need to make it more complicated than it is.

Collectives™ on Stack Overflow

react JavaScript ternary conditional operation

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related