How do show an embedded conditional if es6 variable object is empty

Question

I have a variable that will check if an object is empty...

const objEmpty = _.isEmpty(objStudent); // returns false because its not empty

How can I show that with embedding an expression is jsx code?

This is what I have : {if empty == false ? <p>Empty<p> : <p>not empty</p>} {if empty == false ? <p>Empty<p> : <p>not empty</p>}

How can I check something like this...?

Answer 1

You can do this:

(<div>{ empty === false ? <p>Empty</p> : <p>Not Empty</p> })

or, since the only difference is the 'not' word, you could just change the text based on the if

(<p>{ (empty === false ? '' : 'Not') + ' Empty' }</p>)

You should be aware that when you use the curly braces in JSX, it will automatically create a span tag that wraps around that.

I noticed in the example you posted, that the "Empty" paragraph was missing a closing tag. You had <p>Empty<p> when it should have been <p>Empty</p>