title: Using props in React style attribute
body: <p>(I am using JSX with ES6 syntax)</p>
  
  <p>This works:</p>
  
  <pre><code>render() {
    return (
      &lt;div style={{ width: '95%' }}&gt;&lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>This doesn't work: (why not?) <strong>Edit: It actually does work</strong></p>
  
  <pre><code>render() {
    return (
      &lt;div style={{ width: this.props.progress + '%' }}&gt;&lt;/div&gt;
    )
  }
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <p>It works but the style value has to be a valid value else it will return the error.</p>
  
  <p>I use the state to create the style object and clean out the property with a regular expression in the constructor, so it will not be error-ing again because of invalid values. Here is my solution:</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react'
  
  export default class ProgressBar extends Component {
    constructor(props) {
      super(props)
      let progress = +props.progress.replace(/[^0-9]/g, '') || 50
      this.state = {
        style: {
          width: progress + '%'
        }
      }
    }
  
    render() {
      return (
      ...
        &lt;div className="progress-bar" role="progressbar" aria-valuenow={ this.state.progress } style={ this.state.style }&gt;&lt;/div&gt;
      ...
      )
    }
  }
  ProgressBar.propTypes = {
    progress: PropTypes.string.isRequired
  }
  </code></pre>