In last video we ran into a little bit of an issue when we tried to make our modal component a little
more reusable.
So I had wanted to pass in some variable called actions as a prop called actions and that was supposed
to assign some content or show some content inside of the div with the class name actions inside the
motile.
And so ideally this would be a set of buttons that a user can click on or something like that.
But we very quickly saw that when we wrapped those two buttons with a div semantic UI does not style
the model correctly.
And so this is what we end up with and it's all because we have that extra div in between our div with
class name actions and the two buttons.
So it specifically that div right there that is drawing the styling off.
As I mentioned in the last video that div is specifically there because we are not allowed to assign
multiple GSX elements like so to a single variable.
This is not valid javascript syntax you see right here.
And if you try to run this as a matter of fact like I'm going to save this file and I can flip back
over and it will even give us a very clear message like you're saying a Jasen or sibling elements must
be wrapped in an enclosing tag.
So that's what we're trying to do here we are trying to place some sibling elements next to each other.
But if we want to do so we have to wrap them with a single outside tag so we can have these two conflicting
requirements here on the one hand we have to have that div on the other hand.
We don't want the div because it throws off our styling.
So how are we going to solve this.
Well we're going to use a another little feature included inside re-act something called a re-act fragment
or react fragment is essentially a GSX looking element that is going to allow us to return multiple
elements or assigned multiple elements to a single variable.
But when it gets rendered onto the screen it doesn't actually produce any age to you Mel.
So you can think of Riak fragment as being like an invisible element that doesn't have any impact on
the Dom whatsoever.
So to make use of a fragment we can flip back over to stream delete and now in the dead of the div that
we had wrapping the two buttons a place a j a sex tackier and I'll say re-act fragment as the opening
tag.
And then re-act fragment as the closing tag like so.
And that's pretty much it.
So now we no longer have to GSX tags trying to be assigned to actions.
Instead we have a single tag being assigned to actions and a single tag contains two buttons internally.
So now we're not going to see that same syntax here that we had just a second ago.
In addition because Riak fragment does not actually produce any result or render element inside the
Dom when it gets rendered to the screen it's not going to throw off our styling as well.
So let's save this right here.
If I now flip back over I still see my motile on a screen and those two buttons are styled correctly
because I do not have that extra div being placed inside there.
As a matter of fact if you want to do something a bit interesting you can click on the element inspector
up here and then inspect that actions div..
So here's the div with class actions.
And if I expand it I see the two button elements so that re-act fragment did not render anything into
the DOM whatsoever.
OK.
That's pretty much it for re-act fragment.
Again you want to use this anytime you want to return multiple elements but not have some presence inside
the actual dom.
The last thing ought to mention here very quickly is that you can also sometimes or I say sometimes
you can always shorten re-act fragment to be simply like that right there.
So the kind of opening tag with no text inside of it and the closing tag down there as well.
So we can save this flip back over and everything still appears to work as it did before.
Even after I refresh the page.
Now the reason that we might use re-act fragment instead just be clear like these are totally equivalent.
You can put those empty tags or you can put re-act fragment.
The only reason that you would want to use re-act fragment is that there is some tooling out there like
some Linter some code quality checkers that do not think that empty tags like this are valid syntax.
So some code quality checkers that you might be running even inside of your own code editor will think
that this is invalid GSX and they will throw an error and say hey this is not valid.
You're doing something wrong here.
So the two approaches are identical they do the exact same thing.
The only reason that you would write out re-act fragment again is because some tooling thinks that this
is an error for the rest of this course.
If we ever use a fragment again I'm going to write out the long form that you see right here like re-act
fragment.
Just so you understand we are creating a fragment right there.
And in case you have any tooling that's throwing an error you're not going to see that error by writing
out the long form.
But if you want to absolutely feel free to do the shortened syntax like so OK so that's it for Riak
fragments.
Let's take a quick pause right here.
When we come back the next section we're going to continue to generalize our modal lesing do is make
sure that the on click callback right here can be customized by the parent component as well.