Category Archives: react

Rendering table rows in React

When rendering content with JSX, you have to remember that render method can only return one root node. This makes populating table rows a little tricky. For example, the following code would be invalid:

renderRows() {
    return (
        <tr>
            <td>
                Item 3
            </td>
        </tr>
    );
}

render() {

return (
                <tr>
                    <td>
                      Item 1
                    </td>
                    <td>
                      Item 2
                    </td>
                </tr>
                {this.renderRows()}
);

This is invalid because render contains two root nodes (two tr’s). You’ll see the following error occur:

Uncaught Error: Parse Error: Line 27: Unexpected identifier

To get around this limitation, you need to wrap the content in a new root node. Typically you would use a div for this purpose, but this wouldn’t be valid HTML within a table so the only solution is to use a tbody tag like so:

renderRows() {
    return (
        <tr>
            <td>
                Item 3
            </td>
        </tr>
    );
}

render() {

return (
          <tbody>                
                <tr>
                    <td>
                      Item 1
                    </td>
                    <td>
                      Item 2
                    </td>
                </tr>
                {this.renderRows()}
          </tbody>
);

Glen Scott

I’m a freelance software developer with 18 years’ professional experience in web development. I specialise in creating tailor-made, web-based systems that can help your business run like clockwork. I am the Managing Director of Yellow Square Development.

More Posts

Follow Me:
TwitterFacebookLinkedIn

Learning React

I come from a Perl and PHP backend background. I have moderate JavaScript experience. These are the guides that have helped me get up to speed with React. I’ve included links that explain the reasoning behind React’s way of doing things (e.g. the Virtual DOM) and how to use React itself. I’ve also given a brief rundown on the complementary tools and libraries that I’ve found essential.

The learning curve is steep, but stick with it!

My business requirement for React: Re-building mobile version of audiomack with persistent audio player that continues to play songs between page requests.

Essentials

Tooling overview

  • Node.js – Allows you to run JavaScript server-side
  • React framework
  • NPM – JavaScript Libraries — your project will likely need a load of these. Manage via package.json file
  • Babel – Code transformer — allows you to write the latest JavaScript (ES6 and beyond) and also JSX. Babel transforms it to JS that all modern browsers understand.
  • Webpack – Bundle your raw application code into a package that the browser can execute — it runs Babel, minifies etc.
  • Redux – Manage application state in single place — UI and data changes stored in state tree Getting started with Redux (by Dan Abramov)
  • Sublime’s JavaScript highlighting has some issues with JSX, so install this package — React Syntax highlighting for Sublime Text

Comments and Tips

  • You probably want to render server-side for first call (efficiency & SEO reasons) Server-side rendering
  • Getting a working Vagrant VM with source code is hard (NPM installs in shared folders seem problematic)

Glen Scott

I’m a freelance software developer with 18 years’ professional experience in web development. I specialise in creating tailor-made, web-based systems that can help your business run like clockwork. I am the Managing Director of Yellow Square Development.

More Posts

Follow Me:
TwitterFacebookLinkedIn