TheWebs TheWebs - 1 month ago 4
Javascript Question

Why is react throwing an error

I have the following React Component:

GeneralInformation = React.createClass({

totalCaptialRaisedPanel: function() {
var offeringInfo = this.props.company.data.offerings.data[0];
var percentageComplete = (offeringInfo.capital_raised / offeringInfo.target_amount) * 100;

return(
<div>
<h1>$ {offeringInfo.capital_raised}</h1>
<h3>TOTAL CAPITAL RAISED</h3>
<div className="progress">
<div className="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 60%;">
<span className="sr-only">60% Complete</span>
</div>
</div>
</div>
)
},

render: function() {
return (
<div>
{this.totalCaptialRaisedPanel()}
</div>
)
}
});


The issue seems to be:

<div className="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 60%;">
<span className="sr-only">60% Complete</span>
</div>


As with out it no error is thrown. The error is:

Uncaught Error: Invariant Violation: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by `GeneralInformation`.


Some people have stated its because the Virtual dom is different then the normal dom or something and thats why I am getting this error, how ever that doesn't make sense. All I am doing is creating this component, I am not manipulating it ...

Whats going on?

Answer

Looks like you need style={{width: 60%}}.