Where to Console Log in React JS | 6 Proper Ways to Console Log in React JS | Learn React JS

Aug 15, 2023

Where to Console Log in React JS | 6 Proper Ways to Console Log in React JS | Learn React JS

Should you console log in React JS? Should you console log in JSX in React JS? Where to console log in React JS? You can console log in React JS but where is it appropriate to do in a component? Console log is one of the most useful functions that allows us to debug, create proof of concepts, and add functionality to a web app. React JS does not restrict the use of console log method, but because of its special JSX syntax, there are some good practices that should be followed. You can console log before return, in event handlers, in componentDidMount and in useEffect hook. You can also console log in JSX.

1- How to Console Log in JSX in React JS
JSX allows us to write HTML in React. It allows us to write HTML elements in JavaScript and place them in the DOM without createElement or appendChild methods. But JSX is not vanilla JavaScript, nor is it HTML. It is syntax extension of JavaScript that converts HTML tags into react elements. It makes code easier to read and understand and gets compiled into vanilla JavaScript. In JSX, simple console log statement written in the div tag does not work. It will just render the whole thing in the browser. Write expressions inside curly braces in JSX in React JS. The expression can be a React variable, or property, or any other valid JavaScript statement. JSX will execute the expression and return the result.

2- Console Log above Return in React JS
Another way is to place the console log statement above the return statement in React JS component. Here it does not need expression or curly braces.

3- Console Log in Event Handlers in React JS
If you want to log a value every time an event is fired, you should put the console log method in a function and call the function before return. This is a good way to capture an event and see if you are getting proper value or result.

4- Console Log in componentDidMount in React JS
If you want to use console log only once, you can use lifecycle methods in React class components. Like componentDidMount. Use simple state handler. Open dev tools and see the state changing. State will be changing but console log in componentDidMount will log in console only once, even when state is being changed.

5- Console Log In useEffect Hook
Similarly for function components we can console log in useEffect Hook. It will also log only once and won’t log each time component re-renders unless you want it to.

6- Separate Console Log Component
We can also create a separate component in React JS to use console log in JSX. Pass logged value or string as a child and render the parent console log component that is receiving the logged information. Now we can log anything by using a separate component in JSX. It will receieve logged value as a child and console log it.

There are many ways you can use console log in React JS app. Once you debug your app, make sure to delete all occurrences of console log before exiting the development mode. console log statements add nothing to the production mode, so they should be removed at the end.

✅ Display Data From JSON File in React
   • Display Records or Data From JSON Fil…
✅ Display Icons / Images from JSON File in React JS
   • Display Icons / Images from JSON File…
✅ Fetch All Types of Data from JSON File in React JS
   • Fetch All Types of Data from JSON Fil…
✅ 7 Ways to use Images in React JS
   • 7 Ways to Use Images in ReactJS | Rea…
✅ Easy Way to use Images in React JS
   • Easy Way to Use Images in React | No …
✅ Require Image Not Working in React JS
   • Require Image Not Working in ReactJS …
✅ Multiple Images in One Import
   • Multiple Images in ONE IMPORT | React…
✅ Multiple Sets of Images from One Import in React JS
   • Multiple Sets of Images from ONE IMPO…
✅ Default Map is not a Function in React JS
   • Default MAP is Not a Function | React…
✅ Async Await Fetch in React JS
   • Multiple Ways of Async Await Fetch AP…
✅ Assigned a Value but Never Used
   • Assigned a Value but Never Used | No …
✅ Easily Sort Before Displaying Records in React JS
   • Easily Sort Before Displaying Records…
✅ Responsive Image Gallery from Scratch in React JS
   • A Powerful Responsive Image Gallery f…

✅ ReactJS Playground
   • ReactJS Playground
✅ JavaScript Problem Solving:
http://bit.ly/JavsScriptProblemSolving
✅ Web Development Essentials:
http://bit.ly/WebDevEssentials
✅ Crash Courses:
http://bit.ly/WSPCrashCourses

Find more about reactjs, react tutorials, react js how to guides, step by step react tutorial and react js tutorial examples at WebStylePress by following us.

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

Channel:    / webstylepress
Website: https://www.webstylepress.com
FaceBook: https://www.facebook.com/webstylepress
Twitter: https://twitter.com/webstylepress
GitHub: https://github.com/webstylepress
#JavaScript #JS #ReactJS #React #JSX #EventHandler #ComponentDidMount #UseEffect #WebStylePress #webdevelopment #consolelog

Content

0.48 -> welcome to webstylepress should you console log in react js should you console log in

5.92 -> jsx in react js where to console log in react js okay you can console log in react js but

14.72 -> where is it appropriate to do it in component console log is one of the most useful functions

20.72 -> that allows us to debug create proof of concepts and add functionality to a web app

26.56 -> react js does not restrict the use of console.log method but because of its special jsx syntax

36.72 -> this is jsx there are some good practices that should be followed you can console log before

44.96 -> return and handle click or handle whatever in component did amount and in use effect hook you

52.88 -> can also console log in jsx i will show you how in jsx jsx allows us to write html in react it allows

63.28 -> us to write html elements in javascript and place them in dom without great element or append child

70.96 -> methods but jsx is not vanilla javascript nor it is html it is syntax extension of javascript that

80.16 -> converts html tags into react elements it makes code easier to read and understand and jsx gets

88.32 -> compiled into vanilla javascript in jsx simple console log statement written in the div tag

96.24 -> does not work it will just render the whole thing in the browser for example

107.36 -> this console log will not work it will be printed as is here

114.4 -> instead write expressions inside curly braces

118.48 -> in jsx and react js the expression can be react variable a property or any other valid javascript

126.4 -> statement jsx will execute the expression and return the result here is how use curly braces

136.96 -> save and now we have got console log in jsx you can use console.log above return statement here

150.48 -> for example this one console.log before return statement save console log before return statement

160.48 -> console log in jsx and here it does not need curly braces in handle click let's say we've

173.04 -> got a button and it's on click event we've got an event handler that is handle click before return

187.6 -> we will use handle click

191.92 -> get the event and let's console log this event click event save

201.6 -> refresh now add click of this button we've got this event logged in console

210.64 -> click click click at each click this event is being logged this

216.8 -> is a good way to capture an event and see if you are getting proper value or result

223.2 -> now every time we click at the button it will log the event to console

229.04 -> if you want to use console log only once you can use lifecycle methods and react class components

236.72 -> like componentdidmount here's how create a component in src folder name it comp2.jsx

249.68 -> import component from react

254.8 -> class comp2 extends this component constructor props

263.44 -> component did mount then we've got render and return in component did mount

271.68 -> where this console log in return

278.4 -> let's use an input on change get the event and set this date to even target value so here super props

300.32 -> and this is our state right now input is empty

306.24 -> we will export this component then we will import this component

315.92 -> in our app js and we'll use it here

330.32 -> components come to

335.36 -> input status empty one two three state changed four five six state changed

349.92 -> but this console log that is inside componentdidmount logged only once

359.6 -> even when we are changing the state

362.88 -> this statement ran only once so you can use console log in component did mount

372.32 -> similarly for function components we can console log and use effect hook it will also log only once

380.4 -> and won't log each time component re-renders

384.32 -> unless we want it to so here is a function component com3.jsx

393.76 -> import use state use effect from react

400.24 -> function component name export the component this is our state in part two set it could use state

412.4 -> we've got our internal statement

416.96 -> inside we've got input set input a target value this set input

425.44 -> and here is our use effect inside use effect we have used console.log

433.52 -> log only once from use state hook

440 -> now let's import this component

446.88 -> and then use this component

456.08 -> save console log before return statement console log in jsx

461.68 -> log only once from comprehended mound log only once from you state hook

472 -> now state has been changed

480.96 -> for component 2 and for component 3 this is component 3 this is component 2.

497.52 -> but this console log was fired only once

504 -> we can change that if we want to log it each time when state changes

510.08 -> we can do so so this state has been changed we can use the state here

518.8 -> and use effect here as a dependency when this variable will be changed

526.32 -> use effect will be fired again and console.log will run again

532.16 -> so now refresh one two three now as i am changing value for this input field

544.08 -> use effect is running again and firing this console log each time when this state changes

557.2 -> save 1 and this is the value two three four

567.2 -> now each time state changes consumer log is being fired

575.12 -> we can also create a separate component in react js to just use console log pass

582 -> logged value or string as a child and render the parent console or component that is

588.8 -> receiving the logged information for example create a new component

599.04 -> logger.jsx

602.96 -> cons wsp console.log this is the information that's been received

608.16 -> that we are printing in console.log return false and then we just exported this wsp log save let's

625.04 -> import wspconsolelog from logger.jsx

632.08 -> save and then use it here

641.68 -> this is our logger and this is our information that we want to pass

650.8 -> this is log one

660.48 -> log 2 log 3 and here it is this is log 1 log 2 log 3 refresh log 1 log 2 log 3

683.84 -> now we can log anything by using this separate component in jsx it will receive

690.64 -> logged value as a child and console log it there are many ways you can use console login react.js

698.48 -> app we showed you six ways to console log and react.js but once you debug your app

706.72 -> make sure you delete all occurrences of console log before exiting the development environment

714 -> console log statements add nothing to the production mode so they should be removed

720.08 -> at the end okay i hope it helped like share subscribe and i will see you in the next video

Source: https://www.youtube.com/watch?v=zv8g_3mVthc