• Can you console.log in JSX?
• Llorenc Muntaner
• The Nuggets translation Project
• Permanent link to this article: github.com/xitu/gold-m…
• Translator: EmilyQiRabbit
• Proofreader: Noahziheng, Hanxiansen

Verdict: No!

As a programming teacher, I’ve seen my students write code like this:

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

Writing this will not print the desired content on the console. Instead, render console.log(this.props. Todos) on the browser.

Let’s look at some straightforward solutions first, and then we’ll explain how.

The most common solutions:

Embed an expression in JSX:

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

Another popular method:

Add console.log before return() :

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

A more advanced approach:

A more advanced approach is to use a custom

component:

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

Then use it:

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

Why is that?

It is important to remember that JSX is not native JavaScript, nor is it HTML. It is a syntax extension.

Eventually, JSX is compiled into native JavaScript.

For example, if we write JSX as follows:

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

It will compile to:

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

Let’s review the react. createElement argument to the method:

• ‘H1’ : Tag name, which is a string type

• {className: ‘greeting’} :

  property. It will be converted to an object. The key of the object is the name of the property, and the key value of the object is the value of the property.

• ‘Hello, world! ‘: It’s called children. Anything between the start tag

  and the end tag

  is passed in.

Let’s now review the failed console.log we wrote at the beginning of this article:

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

This code will compile to:

// When more than one element is passed in, the third argument becomes an array

React.createElement(
  'div',
  {}, // No attributes
  [ 
    React.createElement(
      'h1',
      {}, // No attributes either
      'List of todos',),'console.log(this.props.todos)']);Copy the code

Console. log is passed to the createElement method as a string. It was not implemented.

That makes sense. We also saw the heading List of Todos above. How does the computer know which bits of code you want to execute and which bits you want to render?

Answer: The computer thinks both are strings. Computers must treat words as strings.

So, if you want this code to be executed, you need to say it in JSX so it knows how to handle it. You can place code in {} as expressions.

That’s it! Now you know where, when, and how to use console.log in YOUR JSX code!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.