CODEWITHSUNDEEP
htmlreactjsgoogle-chrome-devtools
Wronski
Wronski

Reputation: 1596

React: How to debug why browser showing different value than HTML element in Chrome > Dev Tools?

I am building an app in react.

Problem

My app in Chrome browser is showing a different value than the corresponding HTML element in Dev Tools. This only occurs after a user action on the UI to sort the table. It seems the browser is still showing the old value for that row in the table.

  1. Browser showing value = 3 <-- incorrect
  2. HTML element has value = 41 <-- correct

See image below:

enter image description here

Question

What steps should I take to diagnose what may be causing this issue?

e.g. is there somewhere I should add specific logs? or is this a known issue in react when someone is doing something clearly wrong?

Note: This request is more about the how to diagnose such an issue, rather than finding what is specifically wrong with my code.

Upvotes: 0

Views: 648

Answers (1)

Wronski
Wronski

Reputation: 1596

The problem was in the code it seems. I found the cause through trial and error changing the code.

Previously, the render for my component looked like:

 render() {
    return (
      <td className="hoverWrapper">
          <input
            className="wrappedContent"
            type="number"
            onBlur={this.inputChangeHandler}
            value={this.props.value}
          ></input>
          <EditOnhoverbutton />
      </td>
    )
  }

Changed to:

 render() {
    const showValue = this.props.value ? this.props.value : "";
    return (
      <td className="hoverWrapper">
          <input
            className="wrappedContent"
            type="number"
            onBlur={this.inputChangeHandler}
            value={showValue}
          ></input>
          <EditOnhoverbutton />
      </td>
    )
  }

I suspect the underlying cause was related to the fact that for some rows this.props.value did not exist, and trying to render undefined caused the render to fail, and the original value continued to display.

If anyone can provide a better assessment, I would be grateful.

Upvotes: 1

Related Questions