Rows and Cols vs. Fragments

[mwhite192]

@AccessiT3ch - So for all button and form components I used fragments, but used rows and cols for the image components. My question is was it right/best to use fragments for these components? Did I need (or was is it best) to establish rows and cols in a container?

https://github.com/mwhite192/groupomania/blob/c2ae192a64b8acf4279de18d1d6b9762c571eea5/src/Components/LogInButton/LogInButton.js#L4-L10

[AccessiT3ch]

@mwhite192 - It depends on the context these components are being imported and implemented into. For versatility I would probably avoid including layout of any sort in your most basic components, such as container/row/col and the {" "} spacing.

In the case of this login button, it could simply be returned itself without being wrapped in anything. If this had two elements which needed to be returned then the fragment would be the way to go.

(To me it seems a little overkill to have a component for your logo in it's own component)

If you wanted to have, for example, a component for a row of buttons, that would totally make sense to have those buttons wrapped in Cols (to achieve your spacing) and a Row (which would wrap everything in the component). Maybe such a component would be called SomethingButtonRow (to indicate it's a bootstrapy Row) that would be imported and placed into a Container somewhere.

[mwhite192]

@AccessiT3ch - So I moved the log in button to the AuthForms component since they somewhat go together. I thought this might be the best way to go instead of just having a single button returned. Since the log in button is now with the AuthForms, would it be best to place the AuthForms and button into component using cols and row and placed into a container on the login screen? Or would it be best to keep a fragment? I am just trying to understand components in practice.

https://github.com/mwhite192/groupomania/blob/8fe8818fe431e468855bbe9a84483594badbe923/src/Components/AuthForms/AuthForms.js#L10-L33

[AccessiT3ch]

Ah, well we can nest rows within columns so in general I would definitely use rows and columns anytime we need to do that level of layout. Honestly though, looking at your login design it really seems like there is only one column so it can be kept pretty straight forward here, this could all be in a single fragment that gets loaded to your App component where you might have a Container, row, and/or column wrapping the AuthForms component.

I would recommend taking a stab at whatever feels right, and we can review some of the nuisances because I think this will come down to how you implement your various views. And again, there are many ways to do this, many acceptable patterns so no worries about getting it exactly right, especially the first time!