In this tutorial, we are going to discusshow to perform console.log() in react and react native applicationinside the render block. Most of the times developer trying to addconsole.logstatement inside the return block of render block, in that case it will not print the statement inside the console rather it will print the results inside the browser screen.

Lets see the below example, where we are usingconsole.log statement inside the return blockof render function.

Wrong Method

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

This will not print the expected list in the console. It will just render the stringconsole.log(this.props.countries)in the browser.

Lets see the solution for this example :

Wright Method

Embed the expression in your JSX.

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

Another popular solution widely in use :

Place yourconsole.logbefore thereturn().

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

Also there is another method for this type of scenario, for that youneed to create custom componentin order to use print console.log statement in react and react native application.

Create custom component for console.log.

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

Then you can use it like this :

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

This is all aboutconsole.log in react and react native using JSX.