sagargp sagargp - 5 months ago 13
Javascript Question

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

I have a React component that renders a

<progress/>
element styled by Bootstrap. The
<progress/>
element takes two props,
value
and
max
, and uses these to draw a progress bar. It works great most of the time. However, when
value=0
, the
value
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
render
method:

<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
value=0
?

Edit: the
render()
function is below:

var barColor = "info";

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

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

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

Answer

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.

Comments