As someone that comes from a Vue background, conditionally rendering things in React look a bit cumbersome to me. In Vue, I just use a v-if directive in the element and I'm good to go, but I'm react I see myself constantly doing stuff like using the ternary operator { obj.attr ? <Stuff></Stuff> : null }.
Is there a better solution? Am I approaching things in the wrong way, maybe?
I see why you might find this cumbersome although to be honest I got used to it pretty quick and it stopped being a problem for me a few months into React.
In fact I found the ability to use any JS constructs liberating because as soon as the condition got more complicated I could extract it in a variable, a function call, a switch statement, an object property lookup, or any other valid JS code.
That said we do have some ideas about allowing something like
Interesting... Yeah, I can totally see how abstracting complex conditions into a variable can be useful. I guess it makes a lot of sense - it's all just javascript in the end.
The main problem for me why Angular and Vue is quite meh is because you need to learn another domain specific language. So you need to know some gotchas here and there, some limitations etc. So at the end of the day, maybe ternaries starts to become cumbersome (than you probably need to decompose component to smaller pieces to abstract this away) but at least you surely 100% know how it works.
About make it more beautiful, you can use just shortcut like {obj.attr && <Stuff/>}
Or just use some simple high-order-component, or decompose things and move this clutter to the component itself.
This is one of the big philosophical and opinion differences between people who prefer Angular/Ember/Vue and people who prefer React.
React users generally point to the phrase "it's just Javascript" as a positive thing. Flow control and conditional rendering uses normal JS if statements and conditions, rendering lists is normal JS loops and array methods, and so on. There's no special templating mini-languages needed. Render methods also give you the full power of JS to write whatever logic you need.
People who prefer template-based rendering usually emphasize things like the ability to have designers edit HTML directly, and finding templates easier to read.
Both are valid approaches, and it really is a dividing line based on your own preferences. I personally am very happy with using JS-based rendering logic, and have no interest in using templates, but YMMV.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
As someone that comes from a Vue background, conditionally rendering things in React look a bit cumbersome to me. In Vue, I just use a
v-ifdirective in the element and I'm good to go, but I'm react I see myself constantly doing stuff like using the ternary operator{ obj.attr ? <Stuff></Stuff> : null }.Is there a better solution? Am I approaching things in the wrong way, maybe?
I see why you might find this cumbersome although to be honest I got used to it pretty quick and it stopped being a problem for me a few months into React.
In fact I found the ability to use any JS constructs liberating because as soon as the condition got more complicated I could extract it in a variable, a function call, a
switchstatement, an object property lookup, or any other valid JS code.That said we do have some ideas about allowing something like
to work (see this proposal).
Interesting... Yeah, I can totally see how abstracting complex conditions into a variable can be useful. I guess it makes a lot of sense - it's all just javascript in the end.
Thanks for the answer!
React seems easier than Vue for conditional rendering in my opinion, in the end it's just javascript and you can do it in many different ways!
I completely agree with Camilo.
The main problem for me why Angular and Vue is quite meh is because you need to learn another domain specific language. So you need to know some gotchas here and there, some limitations etc. So at the end of the day, maybe ternaries starts to become cumbersome (than you probably need to decompose component to smaller pieces to abstract this away) but at least you surely 100% know how it works.
About make it more beautiful, you can use just shortcut like
{obj.attr && <Stuff/>}Or just use some simple high-order-component, or decompose things and move this clutter to the component itself.
This is one of the big philosophical and opinion differences between people who prefer Angular/Ember/Vue and people who prefer React.
React users generally point to the phrase "it's just Javascript" as a positive thing. Flow control and conditional rendering uses normal JS
ifstatements and conditions, rendering lists is normal JS loops and array methods, and so on. There's no special templating mini-languages needed. Render methods also give you the full power of JS to write whatever logic you need.People who prefer template-based rendering usually emphasize things like the ability to have designers edit HTML directly, and finding templates easier to read.
Both are valid approaches, and it really is a dividing line based on your own preferences. I personally am very happy with using JS-based rendering logic, and have no interest in using templates, but YMMV.