React & Next js: Only render div if prop contains value

Question

Im working through my app, but I'm stuck on an issue.

I have some data from contentful which I passed as props to my component. There is one piece of data that I only want to render if it contains any value.

This work to an extent, however, the background still shows.


<div className="text-white font-base text-xs text-center p-1.5 bg-black">
   {`${mrr ? mrr : ""}`}
</div>

picture of the frontend

picture of the frontend 2

If anyone could help, that would be great.

Does this answer your question? [if-else statement inside jsx: ReactJS](https://stackoverflow.com/q/44046037) basically: ```{mrr &&
{mrr}
}``` or ```{mrr ?
{mrr}
: <>>}``` — brc-dd, Jul 31 '21 at 14:40

Bhagyashree Meher · Answer 1 · 2021-07-31T15:17:34.473

1

@famouslastwords The TopW3's answer is correct. I will try to explain the code.

The below text will be rendered only when mrr is true. It is same as executing below code:

const result = true && anything; // result = anything

or

const result = false && anything // result = false

{mrr && (
    <div className="text-white font-base text-xs text-center p-1.5 bg-black">
        {mrr}
    </div>
)}

edited Jul 31 '21 at 15:17

answered Jul 31 '21 at 14:55

Bhagyashree Meher

11
3

Thanks! Yeah tested it out and it worked perfectly! – FamousLastWords Aug 01 '21 at 18:32

score 0 · Accepted Answer · answered Jul 31 '21 at 14:35

0

Try this code.

{mrr && (
    <div className="text-white font-base text-xs text-center p-1.5 bg-black">
        {mrr}
    </div>
)}

answered Jul 31 '21 at 14:35

TopW3

1,477
1
8
14

Perfect! That works. Could you explain how that works? Just trying to get my head around it. – FamousLastWords Jul 31 '21 at 14:42

React & Next js: Only render div if prop contains value

2 Answers2