How/Where to use console.log() in React/JSX

Before jumping into this first we need to know what is JSX

JSX:

JSX is nothing but syntax extension of JavaScript. It converts HTML tags into the JavaScript function.

You can find more about JSX in the below post

https://onecompiler.com/posts/3us7wxz4f/jsx-in-react

class Counters extends Component {
  render() {
    return (
      <div>
        console.log("Reset Button", value)
        <button onClick={this.props.onReset} className="btn btn-danger btn-sm ">
          Reset
        </button>
        {this.props.counters.map(counter => (
          <Counter
            onDelete={this.props.onDelete}
            onIncrement={this.props.onIncrement}
            key={counter.id}
            counter={counter}
          />
        ))}
      </div>
    );
  }
}

In the above example, it's a react class with render function and there is a div tag available which will return if we call render function.

If we observe clearly in 5th line there is a console.log statement written in the div tag. This will not work as we expected. It will just render on the UI screen as it is.

Let's see the solution on how to print the value in the console.

First solution is we need to wrap this statement in curly braces like {console.log("Reset Button", value)}

class Counters extends Component {
  render() {
    return (
      <div>
        {console.log("Reset Button", value)}
        <button onClick={this.props.onReset} className="btn btn-danger btn-sm ">
          Reset
        </button>
        {this.props.counters.map(counter => (
          <Counter
            onDelete={this.props.onDelete}
            onIncrement={this.props.onIncrement}
            key={counter.id}
            counter={counter}
          />
        ))}
      </div>
    );
  }
}

Another solution is to place the console.log statement above the return statement

class Counters extends Component {
  render() {
    console.log("Reset Button", value)
    return (
      <div>
        <button onClick={this.props.onReset} className="btn btn-danger btn-sm ">
          Reset
        </button>
        ))}
      </div>
    );
  }
}

Or else we can write our own component to use console.log.

The reason why it renders the console.log on the browser is because of JSX.

As we discussed earlier JSX will convert HTML tags into the JavaScript functions.

For example, if we write a sample code in JSX.

const element = (
  <h1> increments counter by 1<h1>
);

This will be compiled to

const element = React.createElement(
  'h1',
  null,
  'increments counter by 1'
);

Let's understand these parameters

• h1: h1 is nothing but a tag name and it is wrapped with single quotes(String)
• null: These are the props used in tag name like if we use any class name attributes. So in the above code, we didn't use anything that's why it is declared as null.
  For example, if we write

     <button className="btn btn-danger btn-sm ">
          Reset
        </button> 

then our react element would be like

  React.createElement(
  'button',
  {classname: "btn btn-danger btn-sm "},
  'Reset'
 );

• 'increments counter by 1': These are called as childrens compiler will understand this as a string and renders it on browser.

Now we will why we are not able to print the value in the console using console.log

class Counters extends Component {
  render() {
    return (
      <div>
        console.log("Reset Button", value)
        <button onClick={this.props.onReset} className="btn btn-danger btn-sm ">
          Reset
        </button>
      </div>
    );
  }
}

This will be converted to

React.createElement(
  'div',
  {}, // no props are passed/
  [ 
   'console.log("Reset Button", value)'
    React.createElement(
      'button',
      {className:"btn btn-danger btn-sm "}, 
      'Reset',
    ),
    
  ]
);

In the above code, it treats console.log is also considering as a String.

So, the compiler will treat every text as a String.

Hence we need to follow the above solutions to print the value in the console. Not only that if we want to use any javascript syntax in return statement we need to wrap statement in curly braces.