CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3reactjs
user3422637
user3422637

Reputation: 4239

bootstrap progress bar doesn't render inside react component

A simple bootstrap progress bar that works inside my HTML code.

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

Wouldn't render properly in my React component. The progress color is absent.

var DreamLane = React.createClass({
   render: function(){
   <div className="progress">
       <div className="progress-bar" role="progressbar" aria-valuenow="70"
    aria-valuemin="0" aria-valuemax="100" styles="width:70%">
      <span className="sr-only">70% Complete</span>
      </div>
   </div>

   }
});

How can I make this work?

Upvotes: 5

Views: 7002

Answers (2)

Usama Tahir
Usama Tahir

Reputation: 1797

I just had to do it today. this worked for me.

<div className='progress'>
  <div className='progress-bar'
       role='progressbar'
       aria-valuenow={70}
       aria-valuemin={0}
       aria-valuemax={10}
       style={{width: '70%'}}>
    <span className='sr-only'>70% Complete</span>
  </div>
</div>

aria-valuemin, aria-valuemin and aria-valuemax expects a number, not a string

Upvotes: 14

knowbody
knowbody

Reputation: 8276

You should have style property not styles and style prop needs mapping from style properties to values, not a string. So this would work:

<div className='progress'>
  <div className='progress-bar'
       role='progressbar'
       aria-valuenow='70'
       aria-valuemin='0'
       aria-valuemax='100'
       style={{width: '70%'}}>
    <span className='sr-only'>70% Complete</span>
  </div>
</div>

Upvotes: 4

Related Questions