sagargp sagargp - 2 years ago 72
Javascript Question

React "value" prop not reaching DOM if set to 0

I have a React component that renders a

element styled by Bootstrap. The
element takes two props,
, and uses these to draw a progress bar. It works great most of the time. However, when
, the
prop itself doesn't appear in the DOM. This causes the component to show up as a progress bar that's "pulsing" (ie., the bar part of it scrolls from left to right forever).

That is, the following code is returned by the React

<progress value=0 max=255>0/255</progress>

But this is what reaches the actual DOM:

<progress max=255>0/255</progress>

What causes this? It works in all other cases (that is, 0 < value < max) just fine. How can I make it render properly when

Edit: the
function is below:

var barColor = "info";

if (row.fraction <= 0.25)
barColor = "danger";

else if (row.fraction <= 0.50)
barColor = "warning";

return (
<Col md={10}>
<progress className={"progress progress-" + barColor} value={row.quantity} max={}>
{row.quantity + "/" +}
<Col md={2}>
<span style={{fontSize: "12px"}}>{row.quantity + "/" +}</span>

Answer Source

Found a (hacky?) solution.

Somehow the value 0 is not being passed to this specific html component by React.createElement. The progressbar specification says the value must be a float. So, converting to a two decimal number made the value 0.00 to be properly passed.

Try changing your code to: <progress value={parseFloat(row.quantity).toFixed(2)} />

It should do the trick.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download