Console log typescript react

How To Use console.log() in React JS

Console.log() is one of the most useful functions you’ll ever use. It allows you to debug, create proof of concepts, and even add functionality to a web app. In this tutorial we’ll go through all three of these categories. By the end, you’ll have a better understanding of why console.log() is so important. An important thing to note is that console.log() is not exclusive to React! It’s a built-in method in JavaScript, and is useful outside React as well in the ways listed above. Let’s get started!

Logging to the Console

First, if you’ve never seen console.log() before, here’s a quick example and a few instructions for how to use it within Google Chrome (other browsers should be similar). All it does is print a value to the console.

 
function Element()  console.log("Hello World"); return ( div> Hello World /div> ); >; 

In the example above, we log “Hello World”. We’ll now see how to access this variable in the console. Just right-click on the window, in an area that gives you the following popup menu: Then, click on “Inspect”. Within the window that pops up on the right side of the screen, click on the “Console” tab. As we can see, “Hello World” is printed to the console on the right. We’ll be exploring this tool in depth in this tutorial.

Debugging

 
function Element()  //Code is OK const variable = 1; console.log('1'); //Bug HERE while (true); console.log('2'); return ( div> Hello World /div> ); >;

The above is a straightforward example for figuring out where the bugs in the code are. The first variable declaration for ‘variable’ runs well, and “1” is logged. However, after “1” is logged, we have a while(true) that keeps running forever, stalling our program. This is a major bug! As a result, console.log(‘2’) is never executed. As the developer, when we see that only “1” is logged, we know that something goes wrong in between logging “1” and logging “2”. We know where to look; in this case, we would see the “while(true)” as a problem and resolve it.

Logging More than Strings

In the above examples, we log simple strings to the console. We can do much more! Let’s log a JavaScript object to the console. If you’re unfamiliar with the concept, objects are just unordered sets of key-value pairs. There are many structures within the language that fall under this category. In the example below, we will log an event object to the console. These are created when React events are fired.

 
function Element()  function handleClick(event)  console.log(event) > return ( div onClick=handleClick>> Hello World /div> ); >; export Element>; 

The code above logs the event to the console when the div is clicked. When we click on the element, we get the following output in the console, as expected: We see an arrow on the left which we can toggle to see all the attributes of the object: That’s a lot of object variables! console.log() allows us to see all of them in an organized fashion. If an object in our web app was misbehaving, we could log the entire object to try and diagnose what was going wrong.

Proof of Concept

Sometimes all we want to do is test a specific part of our web app, such as a function that we are using. By building out in increments and testing as we go, we can prevent huge bugs from showing up later. For example, we’ll test the onChange event of an input field to make sure we have everything set up properly. When onChange is fired, we’ll print “Working” to the console.

 
function Element()  function handleChange()  console.log("Working") > return ( input type="text" onChange=handleChange>/> ); >; export Element>; 

When we type a few letters into the input field, we get the following output in the console: The above code logs “Working” exactly as we expect, proving that the function being tested, onChange in this case, is working properly. Now, we can replace console.log(“Working”) with any code that we want. We’ll know that future bugs won’t have to do with the onChange. Sometimes, we want to test that the application does NOT do something, for example when we are in the middle of building a web app and many features are incomplete. For example, we could be programming a button that performs an action when clicked:

 
function Element()  function handleClick()  // complexFunction(); > function complexFunction()  console.log("complexFunction") // The rest of our code > return ( button onClick=handleClick>> Button /button> ); >; export Element>; 

In the function handleClick, we’ve commented out complexFunction() because in our example, it’s not ready for use in the web app yet. Thus, when we DON’T see “complexFunction” in the console after clicking the button, we know that our code is working properly.

Adding Functionality

Now that we’ve seen how console.log() can be useful to a developer, we will see ways that it can be useful for the user. In most simple web apps, the user will never open up the page’s console and view console.log()’s. However, with more technical users, it can be helpful for the user to be able to see some of the console.log()’s to see how the application is doing. Below is a simple example that just shows that a button is working:

 
function Element()  function handleClick()  console.log("User click") > return ( button onClick=handleClick>> Button /button> ); >; export Element>; 

While the above component is unlikely to fail, we can see how a more complex component could necessitate using console.log() for the user’s sake. Especially when fetching data over the web, complex applications can have many variables and fail for various reasons that the developer cannot control. In these cases, console.log() can give users insight into where the application is going wrong.

Conclusion

In this tutorial, we went over console.log(), an important function for diagnosing errors, proving that the application works in the way we intend, and providing technical information to users. I hope you are now comfortable using it in your own applications. If you have any questions or comments, please leave them below.

Related Posts:

👋 Hey, I’m Jesse Ryan Shue

I am a Full-Stack Developer and an Industrial/Mechanical Designer. I have work experience in Industrial Design, 3D printing, and teaching. I am experienced in Python, JavaScript, and SolidWorks CAD. Follow me on LinkedIn

Источник

console.log() in React

console.log() is developers’ go-to method for debugging their code. It is used to log JavaScript values on the console. React does not restrict the use of the console.log() method, but because of its special JSX syntax, there are rules that need to be followed.

React console Object

console object comes with an interface that contains dozens of debugging methods. You can find the exact list of methods on the official MDN page. This article will focus on the most popular method — console.log() and look into how to make the best use of it.

Logging in React

There are numerous ways to console.log() a value in React. If you want to continue logging a value every time the component re-renders, you should put the console.log() method under render() call. Here’s what this implementation would look like.

class App extends Component   constructor(props)  super(props)  this.state =   input: ""  >  >  render()   console.log('I log every time the state is updated');  return input type="text" onChange= this.setState(: e.target.value>)>>input>;  > > 

Every time we enter a new value into the text element, the state will change, which will trigger the component to re-render. Every time it does, it will log the specified text to the console.

If you want to console.log() a value only once, you can use lifecycle methods of React class components. Here’s what the actual code would look like:

class App extends Component   constructor(props)  super(props)  this.state =   input: ""  >  >  componentDidMount()  console.log('I log only once');  >  render()   return input type="text" onChange= this.setState(: e.target.value>)>>input>;  > > 

Once you debug your app, make sure to delete all instances of console.log() before exiting the development mode. console.log() statements add nothing to the production mode, so they should be removed.

Customization

React developers can customize the style of the regular console.log() method. For instance, if you want to create a special message for tasks that require attention, you can create a custom console.attention method based on the core functionality of console.log() .

If you add this definition anywhere in your app and call the console.important() method with the message argument, you’ll see that your console will have a colored message.

console.important = function(text)  console.log('%c important message', 'color: #913831') > 

Here’s an example of colored console message:

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

Источник

The console.log Method in TypeScript

This article will introduce console.log() in TypeScript and how it works in TypeScript with examples. We will discuss different segments of it.

Use the console.log() Method in TypeScript

In the console.log() method, we can output a message to the web console. The message may be a single string or multiple JavaScript objects.

Here is an example of console.log() in TypeScript. This feature must be available only in Web Workers.

# Typescript let name = "Hasnain" let id = "Bc140402269" let num = 13 let msg = "Hello"  console.log(name) console.log(id) console.log(num) console.log(msg) 

A list of JavaScript is an object to the output. The representations of a string of each object are appended together to work and listed.

Be Aware if we log things using the new versions of browsers such as Chrome and Firefox, we will get the result in the console as a reference to the object, which is not the «value» of the thing at the same time when we call console.log() . Still, we will get the value of the object at the time when we open the console.

A JavaScript string has zero or more substitution strings. We can replace substitution strings within msg in JavaScript objects, giving us additional control over the output format.

We will discuss console.log() with examples in which we will try to log a string and a number. Let’s try console.log() with a string variable.

# Typescript  let hello = 'hello world' console.log(hello) 

Now, let’s try console.log() with a number.

# Typescript  let evenNumber = 2 console.log('the even is') console.log(evenNumber) 

As the above examples demonstrate, we can use console.log() for any message in our console.

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Related Article — TypeScript Function

Источник

How to console.log in React application using JSX ?

In this tutorial, we are going to discuss how to perform console.log() in react and react native application inside the render block. Most of the times developer trying to add console.log statement 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 using console.log statement inside the return block of render function.

render()  return (  List of countriesh1> console.log(this.props.countries) div> ); >

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

Lets see the solution for this example :

Wright Method

render()  return (  List of countriesh1>  console.log(this.props.countries) > div> ); >

Another popular solution widely in use :

Place your console.log before the return().

render()  console.log(this.props.countries) return (  List of countriesh1> div> ); >

Also there is another method for this type of scenario, for that you need to create custom component in 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; >;

render()  return (  List of countriesh1> ConsoleLog> this.props.countries >ConsoleLog> div> ); >

This is all about console.log in react and react native using JSX. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

Источник