chore: add wrapper components for conditional rendering #4047
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| </TableCell> | ||
| </TableRow> | ||
| </Cond> | ||
| <Cond condition> |
There was a problem hiding this comment.
Why condition here does not have a value?
There was a problem hiding this comment.
The last Cond is the fallback, like in a switch statement - if the other conditions are not met, this will render regardless of whether its condition is true. So I thought the best convention would be to write it this way so that the reader knows it's not a real condition. The alternative is to make condition optional and omit it here, but if it were accidentally omitted in an earlier Cond, that one would always be skipped, and I thought avoiding that bug was important.
BrunoQuaresma
approved these changes
Sep 14, 2022
Kira-Pilot
approved these changes
Sep 14, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Check out
Conditionalsin Storybook!ChooseOnetakes any number ofCondchildren.Condwraps anything you want to render conditionally, plus aconditionprop; it's just a way of attaching a condition to some JSX.ChooseOnerenders exactly one of its children: the first one whose condition is true, or else the last one. The lastconditionis ignored, but I didn't make it an optional prop because I think it would lead to worse bugs if people forgot to add it in other cases. So I suggest you just write the last one<Cond condition>so it's obvious that it's not conditioned on anything.Maybetakes aconditionprop and a child. It renders its child if the condition is true; otherwise it returns null.My hope is that these will make our render code more readable because we don't have to break it up with curly braces, juggle ternaries, rearrange
returns, or read everything in order to tell the difference between independent conditionals (Maybes) and interdependent conditionals (ChooseOnes).To test them out, I put them in
TemplatesPageView, where we had a lot of conditional rendering that was getting hard to read.