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?
