Day 5 of #100daysofcode

Today we’ll look at how to render two elements side by side using react Fragment. You cannot render two React elements side by side (span>Hello/span>span>World/span>) in React. They must be enclosed in another element (such as a <div>). This may appear to be an odd limitation, but considering that JSX is compiled to React createElement calls, it makes sense.

Our initial code will be :

If we want to render two spans side by side, one saying “Hello” and the other saying “World.” Let’s start with React createElement and then look at how we can do it with JSX.

First, create two elements :

Then we’ll use react fragment to display both elements side by side :

We can now render our element :

But we don’t want to use React’s createelement; instead, we’ll comment out the above code and write this :

We can render two spans side by side by using <React.Fragment>/React.Fragment>, which is jsx syntax.

You can also remove React.Fragment and replace it with <></>. Like :

That’s all there is to toady.