How to use ternary operator for rendering jsx using react?

Question

i want to render jsx based on condition using react.

if condition1 and condition2 should display button add. if condition1 and !condition2 should display button click me

below is my code,

render = () => {
    return (
        {condition1 && condition2 && (
            <button>add</button>
        )}
        {condition1 && !condition2 && (
            <button>click me </button>
        )}
    );
}

how can i rewrite above code using ternary operator. could someone help me fix this. thanks.

Doing this is cleaner then having to nest ternary operators. — wentjun
– wentjun, Commented Jun 5, 2020 at 14:12

swapnesh · Accepted Answer · 2020-06-05 14:18:31Z

1

You can write something like this -

{condition1 ? 
  (condition2 ? 
    (<button>add</button>) : (<button>click me </button>) 
  ) : null}

Note - Sometimes ES Linter throws warning for using nested ternary operators in JSX render method. So keep this in mind.

No Nested Ternary

edited Jun 5, 2020 at 14:18

answered Jun 5, 2020 at 14:13

swapnesh

26.8k24 gold badges97 silver badges129 bronze badges

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

Comments

Dennis Vash · Accepted Answer · 2020-06-05 14:30:35Z

1

condition1 && condition2 ? <button>add</button> : <button>click me </button>;

edited Jun 5, 2020 at 14:30

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

answered Jun 5, 2020 at 14:13

Dipesh KC

2,4631 gold badge19 silver badges20 bronze badges

Comments

Andrea · Accepted Answer · 2020-06-05 14:21:16Z

0

return ((condition1 && condition2)?(<button>add</button>):((condition1 && !condition2)?(<button>click me </button>):()));

edited Jun 5, 2020 at 14:21

answered Jun 5, 2020 at 14:14

Andrea

776 bronze badges

1 Comment

ysf Over a year ago

While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation.

Collectives™ on Stack Overflow

How to use ternary operator for rendering jsx using react?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related