CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapreactjs
bsky
bsky

Reputation: 20242

Component not rendered with all features

I have a React component with the following render method:

  render: function() {
    console.log("In render method");
    return (
      <div>
        <div className="dropdown">
          <button onClick={this.displayRest} className="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Dropdown
            <span className="caret"></span>
          </button>
           <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
             <li><a href="#">Something else here</a></li>
             <li role="separator" className="divider"></li>
             <li><a href="#">Separated link</a></li>
           </ul>
        </div>
    </div>
    );
  }

The component appears like this:

enter image description here

So the dropdown button is displayed, but it is not responsive. If I click on it, the dropdown does not show.

Also, the statement console.log("In render method"); has no effect, as nothing is printed to the console.

Why is this component only partially rendered?

Upvotes: 0

Views: 27

Answers (1)

FunkyPeanut
FunkyPeanut

Reputation: 1182

It's weird that the log statement isn't showing up. Are you sure you checked the correct console window in the browser? Also do you have jQuery included inside your project?

It's pretty annoying at times to work with vanilla react and bootstrap. Check outreact-bootstrap - it makes handling both a little bit easier.

Upvotes: 1

Related Questions