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

Question

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

In addition to the other answers, you can also use a guard and return null if your condition fails. e.g. render() {if (!myCondition) return null; return <button>...</button>} — Moritz Roessler
– Moritz Roessler, Commented Jun 5, 2020 at 12:01

wentjun · Accepted Answer · 2020-06-05 10:35:13Z

1

For this case, you can use short circuit evaluation:

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

edited Jun 5, 2020 at 10:35

answered Jun 5, 2020 at 9:50

wentjun

42.9k10 gold badges108 silver badges116 bronze badges

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

2 Comments

someuser2491 Over a year ago

thanks but this will not display if it is not admin and count < 0

wentjun Over a year ago

@someuser2491 Just double checked your question, and realised I missed out the other condition. I have just updated my answer.

Arseniy-II · Accepted Answer · 2020-06-05 11:01:38Z

0

You can simply add "&&" to render conditionally

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

edited Jun 5, 2020 at 11:01

Arseniy-II

9,3595 gold badges28 silver badges52 bronze badges

answered Jun 5, 2020 at 9:50

messerbill

5,6391 gold badge31 silver badges39 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related