CODEWITHSUNDEEP
javascriptreactjs
someuser2491
someuser2491

Reputation: 1968

How to render jsx only when a condition is true using react and typescript?

i want to render a jsx if condition is true using ternary operator and using react and javascript.

what i am trying to do? when the variable admin is true an count is < 0 i donot want to display the button "add". and should display under conditions below

admin && count > 0
!admin

below is my code,

render = () =>{
    return (
        <button> add </button> //should render this based on condition
    )
}

Could someone help me fix this. thanks.

EDIT: below are the conditions to be displayed

count > 0 && is_admin
count > 0 && !is_admin
count <0 && !is_admin

condition when not to be displayed

count <0 && is_admin

Upvotes: 2

Views: 577

Answers (2)

messerbill
messerbill

Reputation: 5629

You can simply add "&&" to render conditionally

render = () => {
    myCondition && (<button>test</button>)
}

Upvotes: 0

wentjun
wentjun

Reputation: 42526

For this case, you can use short circuit evaluation:

render() {
    return (
      <>
        {((admin && count > 0) || !admin) && <button> add </button>}
      </>
    )
}

Upvotes: 1

Related Questions