An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
Some of Our Sources
View All SourcesLets repair ternary in React JSX
The ternary operator (x ? y : z) is said to trigger OCD in well-cultured programmers from the day it came into React JSX. It is the current defacto way of rendering react components conditionally. What if we abstract this weird syntax and have a friendly interface to render things conditionally.
Let's spin up a small Next.js application which shows a message on screen if the generated random number is even.
In the following snippet, youll see the common way to render using the ternary operator:
The funny and weird syntax presentation from lines 9 to 13 kills my mood every time I see it.
Here comes our dedicated component on the ninja cleaning mission:
Conclusion
==========
What we achieved is Treat to eyes if nothing else. Also, now we have a standard way of handling conditional rendering throughout the application using this reusable component. Well, looking back, it seems funny that we got rid of ternary by writing a ternary. Irony!
Will be posting such micro articles on various day-to-day hacks. Stay tuned!
To Connect
==========
LinkedIn: https://www.linkedin.com/in/sameerkumar1612
Follow on Medium: https://sameer-kumar-1612.medium.com
Original Link: https://dev.to/sameer1612/lets-repair-ternary-in-react-jsx-2jem
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To