React - Can't console.log in Chrome

JavaScript
1

Hi there.
It’s happing something super strange.

I built a simple click event and function with a console.

It works but I don’t get why Chrome displays the concole.log (‘Message’ ) for a fraction of a second only without printing the message.

It happened only with the click event.

What should I do?

2

Is that click event bound to a button with submit type inside a form similar to the example below?

<form>
  <button type="submit">Click me</button>
</form>
1 Like
3

If that’s the case, you need to prevent the default browser behaviour.

function clickHandler(event) {
    // your code here
    event.preventDefault();
}

If you’d like to read more about this, here’s quite explanatory article.

5

In React, it’s possible that the page is re-rendering or updating too quickly after the click event, causing the console message to disappear before you can see it

You can try adding a delay before the page re-renders or updates

You can modify your code to wait for a few seconds before updating the state or re-rendering the component:

const handleClick = () => {
  console.log('Message');
  setTimeout(() => {
    // Your code that updates the state or re-renders the component goes here
  }, 3000); // wait for 3 seconds before updating the state or re-rendering the component
};

return (
  <button onClick={handleClick}>Click me</button>
);

This will give you some time to see the message in the console before the state is updated

Alternatively, you could try using a different browser to see if the issue is specific to Chrome.

6

That does not make any sense to me. How is that possible? I think there are two possible reasons:

  1. The page reloads thus the console is cleared
  2. There are applied filters for displaying messages in the console.
    image
    image1466×364 25 KB
  3. Production build removed all console.logs

I also found this GitHub issue.