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: / webstylepress
Twitter: / webstylepress
GitHub: https://github.com/webstylepress
#JavaScript #JS #ReactJS #React #JSX #EventHandler #ComponentDidMount #UseEffect #WebStylePress #webdevelopment #consolelog
Смотрите видео Where to Console Log in React JS | 6 Proper Ways to Console Log in React JS | Learn React JS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь WebStylePress 03 Апрель 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 7,493 раз и оно понравилось 28 людям.