Why is react throwing an error

Question

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 1

This is what worked for me:

style={{width: "60%"}}

Answer 2

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