Can you console.log in JSX?

Let's look at some straightforward solutions first; then, we will explain the details.

Dec 28, 2021

As a coding instructor, I have seen many students trying this:

render () {
  return(
    <div>
      <h1>List of todos</h1>
      console.log(this.props.todos)
    </div>  
  );
}

This will not print the expected list in the console. Instead, it will just render the string "console.log(this.props.todos)" in the browser.

Let's look at some straightforward solutions first; then, we will explain the details.

The most used solution:

Embed the expression in your JSX:

render () {
  return(
    <div>
      <h1>List of todos</h1>
      { console.log(this.props.todos) }
    </div>  
  );
}

Another popular solution:

Place your console.log before the return():

render () {
  console.log(this.props.todos)
  return(
    <div>
      <h1>List of todos</h1>
    </div>  
  );
}

A fancy solution:

Get fancy by writing and using your own<ConsoleLog> Component:

const ConsoleLog = ({ children }) => {
  console.log(children);
  return false;
};

Then use it:

render () {
  return(
    <div>
      <h1>List of todos</h1>
      <ConsoleLog>{ this.props.todos }</ConsoleLog>
    </div>  
  );
}

Why is that so?

We have to remember that JSX is not vanilla JavaScript or HTML. It is a syntax extension.

Ultimately, JSX gets compiled into vanilla JavaScript.

For example, if we write the following JSX:

const element = (
  <h1 className="greeting">
  Hello, world!
  </h1>
);

It will get compiled down to:

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

Let's review the parameters of React.createElement :

'h1' : This is the name of the tag, as a string
{ className: 'greeting' } : These are the props used in <h1> . It's converted to an object. The key of the object is the name of the prop and the value, its value.
'Hello, world!' : This is called the children . It's whatever is passed between the opening tag <h1> and the closing tag </h1> .

Let's now review the failing console.log that we tried to write at the start of this article:

<div>
  <h1>List of todos</h1>
  console.log(this.props.todos)
</div>

This would get compiled down to:

// when more than 1 thing is passed in, it is converted to an arrayReact.createElement(
  'div',
  {}, // no props are passed
  [
    React.createElement(
      'h1',
      {}, // no props here either
      'List of todos',
    ),
    'console.log(this.props.todos)'
  ],
);

See how the console.log is passed as a string to createElement and it's not executed.

It makes sense, above we have the title List of todos. How could the computer know which text needs to be executed and which is something you want to render?

Answer: It considers both as a string. It ALWAYS considers the text as a string.

Hence, if you want that to be executed, you need to specify to JSX to do so. By embedding it as an expression with {} .

And there you go! Now you know where, when, and how console.log can be used inside of JSX!

If you like this article, join more than 2,000 subscribers.

Every other Wednesday, I share an article on a topic that you don't learn at work.

Thanks for subscribing! A confirmation email has been sent.

Check the SPAM folder if you don't receive it shortly.

Sorry, there was an error 🤫.

Try again and contact me at llorenc[at]gimtec.io if it doesn't work. Thanks!