Console logging for react

Question

I m super new to React and I m trying to get it set up for Meteor and piecing stuff together from other sources too  One of these other sources set up console logging for the app  but I m going the ES6 JSX way so just using their code wouldn t work for me  or it doesn t seem like it does    Some code I found for logging is  import Logger from  simple-console-logger   Logger configure  level   debug       but I m seeing this error   I also tried using react-logger and react-console-logger to no avail  Here s my code for the latter  which I believe should work   import  Logger  ConsoleLogger  from  react-console-logger   const myLogger   new Logger    export default class App extends Component       render             myLogger info  something witty              However  myLogger info        is making a call to node modules react-console-logger lib Logger js which has it defined as    And this logger is undefined  although I see it be defined above   Does anyone know what I m doing wrong  It looks to me like the library has it wrong  but maybe it has something to do with me using JSX files instead of js

User · Answer

If you want to log inside JSX you can create a dummy component which plugs where you wish to log   x000D   x000D  const Console   prop   gt      console Object keys prop  0      Object values prop      null      React components must return something        Some component with JSX and a logger inside const App        gt      lt div gt       lt p gt imagine this is some component lt  p gt       lt Console log  foo    gt       lt p gt imagine another component lt  p gt       lt Console warn  bar    gt     lt  div gt      Render  ReactDOM render     lt App   gt     document getElementById  react     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 8 4 umd react production min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 8 4 umd react-dom production min js  gt  lt  script gt   lt div id  react  gt  lt  div gt  x000D   x000D   x000D

User · Answer

If you re just after console logging here s what I d do   export default class App extends Component     componentDidMount         console log  I was triggered during componentDidMount          render         console log  I was triggered during render       return           lt div gt  I am the App component  lt  div gt                Shouldn t be any need for those packages just to do console logging

User · Answer

Here are some more console logging  pro tips    console table  var animals           animal   Horse   name   Henry   age  43          animal   Dog   name   Fred   age  13          animal   Cat   name   Frodo   age  18       console table animals       console trace  Shows you the call stack for leading up to the console     You can even customise your consoles to make them stand out  console todo   function msg        console log       c   s   s   s        color  yellow  background - color  black                 msg                 console important   function msg        console log       c   s   s   s        color  brown  font - weight  bold  text - decoration  underline                 msg                 console todo    This is something that    s need to be fixed      console important    This is an important message          If you really want to level up don t limit your self to the console statement    Here is a great post on how you can integrate a chrome debugger right into your code editor    https   hackernoon com debugging-react-like-a-champ-with-vscode-66281760037

[javascript] Console logging for react?

If you want to log inside JSX you can create a dummy component
which plugs where you wish to log:

Examples related to javascript

Examples related to reactjs

Examples related to meteor

Examples related to logging

Examples related to jsx