An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Switch Statements in JSX
JSX allows us to describe our UI using javascript expressions. This has interesting implications for control flow, because control flow statements in javascript (if, for, switch, etc) do not return values (they are imperative). This means that while we can use control flow statements to return top-level blocks of JSX,
if (isLoading) { return <span>loading...</span>} else { return ( <section> <h1>My content</h1> {content} </section> )}
we cannot use them inline.
return ( <section> <h1>My content</h1> {/* this is a syntax error ... */} {if (isLoading) { return <span>loading</span> } else { return content }} </section>)
However, since JSX allows for embedded Javascript expressions, rather than statements, we can mimic the functionality of if, else and switch using the ternary operator!
// a simple if-elsereturn ( <section> <h1>My content</h1> {isLoading ? ( <span>loading</span> ) : ( content )} </section>)// a switch (nested ternary)return ( <section> <h1>My content</h1> {isLoading ? ( <span>loading</span> ) : hasErrors ? ( <span>something went wrong</span> ) : ( content // this is the last "else" case )} </section>)
Scrupulous style guide adherents may claim that nested ternaries are confusing and error prone, but functionally it's not different then an if-else-if chain. If you and your linter can get used to it, I think it's a cleaner way to represent switch logic in JSX!
Original Link: https://dev.to/dwoodwardgb/switch-statements-in-jsx-bna
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To