JSFeeds: scotch.io - React Starter: JSX Gotchas

Saturday, 22 June, 2019 UTC

React Starter: JSX Gotchas

Summary

JSX is a very powerful technology. With all new things that we have to learn, there is a bit of a learning curve. Let's talk about some of the gotchas when using JSX. These are some common things that are overlooked when first starting with JSX.

I am a firm believer that learning JSX will make you a better JavaScript developer in the long run.

In this article, let's look at some JSX things that might cause you grief. Keep these in mind when writing your JSX templates.

All Elements Must Have a Closing Tag

For the majority of HTML elements, we have closing tags like </div>. For the HTML tags that don't require a closing tag, we'll need to add a closing tag for JSX.

<img src=""> has to be <img src="" />

Valid JSX Closing Tags

Here are more examples of valid JSX with closing tags:

// VALID!

// with closing tag
<div>stuff</div>
<h1>title</h1>
<p>more stuff</p>

// self closing
<img />
<input />
<br />

// custom components
<MyComponent />
<MySidebar>stuff stuff stuff</MySidebar>

Invalid JSX Closing Tags

The following would be invalid ways to create JSX elements:

// NOT VALID!

<img>
<input>
<br>

// custom components
<MyComponent>

There Must Always Be One Parent Element

One of the early issues you may see in JSX is when you want to return multiple elements. This is very common since most websites and apps will have more than just one element.

For instance, we have an article that will have a bunch of <p> tags. The following would be invalid.

// NOT VALID!

function App() {
    return (
        <p>first paragraph</p>
        <p>second paragraph</p>
    );
}

We have two <p> tags sitting right next to each other with no parent element. We are returning two adjacent elements. React will help us out and show an error:

https://i.imgur.com/7KKbnYq.png

There has to be 1 parent wrapper element.

The following is invalid:

function App() {
    // not valid. multiple top-level elements
    return (
        <h1>title goes here</h1>
        <p>content stuffs here</p>
    );
}

To make that valid, we need to always have 1 wrapping element. We'll wrap the <h1> and <p> with a <div>.

// VALID

function App() {

    // valid. only 1 top-level element (div)
    return (
        <div>
            <h1>title goes here</h1>
            <p>content stuffs here</p>
        </div>
    );
}

The wrapping element can be anything. React just cares that there is always one container.

Using Fragment

There may be times when you don't want to have a parent element. Let's say you have a <td> and don't want to put a <div> inside of it.

For example, this wouldn't be valid HTML since you can't have a block level element (div) inside of a td.

// NOT VALID!

// create an item 
function Item() {
    return (
        <div>
            <td>Whoa</td>
            <td>Yea</td>
        </div>
    );
}

// create a table and use item
function App() {
    return (
        <table>
            <tr>

                <Item />

            </tr>
        </table>
    );
}

React provides us with a Fragment that we can use in place of an actual HTML element. We can now rewrite <Item /> like so:

// create an item 
function Item() {
    return (
        <React.Fragment>
            <td>Whoa</td>
            <td>Yea</td>
        </React.Fragment>
    );
}

You can also destructure Fragment when you import:

import React, { Fragment } from 'react';

// create an item 
function Item() {
    return (
        <Fragment>
            <td>Whoa</td>
            <td>Yea</td>
        </Fragment>
    );
}

Conclusion

JSX is an amazing tool that is very powerful. If you understand its ins and outs, you can become a better JavaScript developer!

... more @ scotch.io

scotch.io