How to show/hide elements on boolean value on react,js

Question

I work with Carousel view, and i have some dynamicaly elements, which should appear from Json list.

{
        category: "Category",
        code: "421313",
        title: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
        price: 156,
        sold: false,
        salePrice: false
      },

As u can see i have two boolean value, and if thi value true i need to show some div element on the view.

               <div className={classes.card_ceromented}>
                Recommended
                </div>
              <div className={classes.card_top_product}>
                Top Product
                </div>

classes.card_top_product this element i need to show hide on bollean value.

How i can show div element on true json value?

My code: JsFiddle

Answer 1

You can do conditional rendering .

{ category.sold && (<div> This gets rendered when sold is true</div>)}

Conditional Rendering In React