Conditional rendering of React components without using ternary operators

Question

Hi currently have the following code React code:

  return (
    <Container>
      {booleanValueOne ? (
        <TrueComponent props={props} />
      ) : (
        [
          <DefaultComponentOne props={props} />,
          <DefaultComponentTwo props={props} />,
        ]
      )}
    </Container>
  );

So if booleanValueOne is true we return <TrueComponent and if not returning an array of DefaultComponents. This is straightforward.

But I since want to add a second boolean value: booleanValueTwo - and if it's true, return TrueComponentTwo & if neither of booleanValueOne or booleanValueTwo are true, returning the array of default components.

Can anyone share best practises for doing so?

I can't use a ternary as I have 3 possible outcomes.

Nested ternaries? Or just write a damn if - else if - else :) — Yury Tarabanko
– Yury Tarabanko, Commented Nov 2, 2021 at 10:36
@evolutionxbox Then you might need to duplicate the wrapper code in every return. — Yury Tarabanko
– Yury Tarabanko, Commented Nov 2, 2021 at 10:53
Yeah, might also work. <Container>{(() => {})()}</Container> — Yury Tarabanko
– Yury Tarabanko, Commented Nov 2, 2021 at 10:56

Yury Tarabanko · Accepted Answer · 2021-11-02 10:41:30Z

3

You can have nested ternaries. Should be readable if properly aligned

const result = booleanValueOne ? (
  <TrueComponent props={props} />
) : booleanValueTwo ? (
  <TrueComponentTwo props={props} />
) : (
  [<DefaultComponentOne props={props} />, <DefaultComponentTwo props={props} />]
);


return (<Container>{result}</Container>)

Or you could use normal control flow if - else if to assign correct value to result variable.

let result = null;

if (booleanValueOne) {
  result = <TrueComponent props={props} />;
} else if (booleanValueTwo) {
  result = <TrueComponentTwo props={props} />;
} else {
  result = [
    <DefaultComponentOne props={props} />,
    <DefaultComponentTwo props={props} />,
  ];
}

answered Nov 2, 2021 at 10:41

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

1 Comment

Yury Tarabanko Over a year ago

@cts Glad I could help. Ternary is just an expression so you can have it anywhere you can put expression. Just be careful to not make it unreadable.

Jérôme Guèrin · Accepted Answer · 2021-11-02 10:54:10Z

1

You can use this template :

return (
    <Container>
      {booleanValueOne && (
        <TrueComponent props={props} />
      )}
      {(!booleanValueOne && booleanValueTwo) && (
        <TrueComponentTwo props={props} />
      )}
      {(!booleanValueOne && !booleanValueTwo) && (
        [
          <DefaultComponentOne props={props} />,
          <DefaultComponentTwo props={props} />,
        ]
      )}
    </Container>
);

answered Nov 2, 2021 at 10:54

Jérôme Guèrin

211 bronze badge

Collectives™ on Stack Overflow

Conditional rendering of React components without using ternary operators

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related