DEV Community

Cover image for Understanding the "Element" React Component: A Flexible Approach to Conditional Rendering

Understanding the "Element" React Component: A Flexible Approach to Conditional Rendering

Serif COLAKEL on January 14, 2024

When working with React, developers often encounter scenarios where they need to conditionally render elements based on certain conditions. The pro...
Collapse
 
eitanavgil profile image
Eitan • Edited

I am not arguing about this technique, but it makes your code unreadable. Having a generic Element with 'as' type makes the code less intuitive and cumbersome. You are trying to solve a problem that is not that of an issue, and on the way you are making the code less readable to other developers. React developers should know to read JSX with conditional rendering. If you wish to make it cleaner, add a boolean const above the JSX (e.g. const showForm...) and don't add long or complex logic to the JSX.

Collapse
 
kornelijepetak profile image
Kornelije Petak

I disagree about react devs should know how to read conditional rendering. It very quickly becomes unreadable and is a norm on the internet only because self taught developers who couldn't care less about readability proliferated in recent years.

Lifting conditional renders outside of jsx and putting only properly named variables into jsx the only readable way. It keeps jsx as simple as possible (and semantically as close to markup as possible).

Collapse
 
serifcolakel profile image
Serif COLAKEL

I understand but i like see other frameworks approach in react, thank you for feedback :)

Collapse
 
nt222 profile image
NT222 • Edited

There are discussions about this topic. Your solution is unreadable and having hidden problems. It does not work for this code:

<Element as="section" rcIf={obj}>
        { obj.title}
</Element>
Enter fullscreen mode Exit fullscreen mode

This is best package for [React control statements components] now: npmjs.com/package/reloc

Collapse
 
serifcolakel profile image
Serif COLAKEL

Thank you for your feedback :)

Collapse
 
floony7_87 profile image
Fred Lunjevich

Yeah, not convinced this a solution to anything really. I've written some nasty conditionals but in refactoring I just lifted it out of the jsx. Most cases, however, it isn't really an issue.

Collapse
 
iamfoxx profile image
jerry Almeida

Good idea, but....

Collapse
 
serifcolakel profile image
Serif COLAKEL • Edited

Thank you for your feedback, but??

Collapse
 
multani9900 profile image
Multani

I'm not quarreling over this method, but rather it makes your code garbled. Having a conventional Component with 'as' type makes the code less instinctive and unwieldy. You are attempting to take care of an issue that isn't that of an issue, and on the manner in which you are making the code less meaningful to different designers. Respond designers ought to be aware to peruse JSX with restrictive delivering.

There are conversations about this point. Your answer is confused and having stowed away issues.

Collapse
 
eitanavgil profile image
Eitan

Gee... This is the 1st comment with GPT interpretation. We got to a point that even comments are GPT generated just for the sake of commenting something?
Multani, a wise man once said "if you don't have anything to say, just be quiet".