Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Display Output in React with a Component's render Method

1:20 React lesson by

The render method is where the magic happens in your React components to display output to the screen. This lesson explains how to structure your JSX in a React component.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

The render method is where the magic happens in your React components. This lesson will introduce you to this method and its use.

Avatar
Guillermo

The reason why not putting JSX or parenthesis in the same line of the return statement will make the code fail is that JS ASI (Automatic Semicolon Insertion) mechanism, will interpret that after the return keyword, there must be a value, and if it's not present, then it will append undefined seamless ending the sentence (return undefined;).

In reply to egghead.io

The render method of our React component is only allowed to return a single node. To illustrate that, right here after the <h1>, I'm going to create a second node. It's a <b> tag with an inner HTML of bold.

App.js

import React from 'react';

class App extends React.Component {
  render(){
    return <h1>Hello World</h1> <b>Bold</b>
  }
}

We can see we do in fact get an error here. Adjacent JSX elements must be wrapped in an enclosing tag.

Adjacent JSX elements

The reason this doesn't work is it's the equivalent of trying to return a function followed by another function. That function is React.createElement. It'd be like trying to return React.createElement followed by React.createElement, and that's not going to translate well to JavaScript.

render(){
   // return <h1>Hello World</h1> <b>Bold</b>
   return React.createElement('', , ) React.createElement('', , )
  }

The way that we solved this is by wrapping our nodes in a parent node. I'm just going to create a <div> here. I'm going to wrap these guys, our <h1> and our <b> tag, in that <div>.

render(){
    return (
      <div>
        <h1>Hello World</h1> 
        <b>Bold</b>
      </div>
    ) 
  }

Let me just clean this up a little bit, save that, and we can see on the right everything is working as expected.

You'll notice I am wrapping my JSX in parentheses. I can go ahead and get rid of those. Everything will work fine if I bring the first line of our JSX up to the same line as the return statement.

render(){
    return <div>
        <h1>Hello World</h1> 
        <b>Bold</b>
      </div>
  }

That's going to work just fine, but as soon as I put it onto the next line, it is in fact going to break. I just as a preference, not a requirement, wrap my JSX in parentheses just so that I can utilize all the white space.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?