title: React Dynamic CSS
body: <p>I am trying to create a rectangle that is "6.25%" times the width returned from a function for a calendar view. The rectangles will represent the number of hours of the appointment and must shrink proportionally so they line up with the hours on the axis if the screen is resized.
  This is what I want to do, but this does not work.</p>
  
  <pre><code>class Appointment extends React.Component {
    getWidth(appt){
      return Math.abs((new Date(appt.end_at)-(new Date(appt.start_at))))/3600000
   }
    render () {
      var style = {
          width:this.getWidth(this.props.appointment) *'6.25%',
          height:'30px',
          background:'blue',
      };
      return (
          &lt;div&gt;
              &lt;div id="rectangle" style={style}&gt;&lt;/div&gt;
          &lt;/div&gt;
      );
  }
  }
  </code></pre>