Can you console.log in JSX?

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 thechildren
. 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!
Thanks for reading, don't be a stranger 👋
GIMTEC is the newsletter I wish I had earlier in my software engineering career.
Every other Wednesday, I share an article on a topic that you won't learn at work.
Join more than 3,000 subscribers below.