Bootstrap 4 not rendering completely reactjs

Question

I have searched for Bootstrap 4 templates of a navbar with login and I came across this. So, I have converted it and this is the code:

import React, {Component} from 'react';

class HeaderComponent extends Component {
    render() {
        return (
            <nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
                <div className="container">
                    <a className="navbar-brand" href="/">Reddit</a>
                    <button className="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
                        &#9776;
                    </button>
                    <div className="collapse navbar-collapse" id="exCollapsingNavbar">
                        <ul className="nav navbar-nav">
                            <li className="nav-item"><a href="/" className="nav-link">Home</a></li>
                            <li className="nav-item"><a href="/" className="nav-link">Popular</a></li>
                            <li className="nav-item"><a href="/" className="nav-link">All</a></li>
                        </ul>
                        <ul className="nav navbar-nav flex-row justify-content-between ml-auto">
                            <li className="nav-item order-2 order-md-1"><a href="/" className="nav-link" title="settings"><i className="fa fa-cog fa-fw fa-lg"></i></a></li>
                            <li className="dropdown order-1">
                                <button type="button" id="dropdownMenu1" data-toggle="dropdown" className="btn btn-outline-secondary dropdown-toggle">Login <span className="caret"></span></button>
                                <ul className="dropdown-menu dropdown-menu-right mt-2">
                                <li className="px-3 py-2">
                                    <form className="form">
                                            <div className="form-group">
                                                <input id="emailInput" placeholder="Email" className="form-control form-control-sm" type="text" required="" />
                                            </div>
                                            <div className="form-group">
                                                <input id="passwordInput" placeholder="Password" className="form-control form-control-sm" type="text" required="" />
                                            </div>
                                            <div className="form-group">
                                                <button type="submit" className="btn btn-primary btn-block">Login</button>
                                            </div>
                                            <div className="form-group text-center">
                                                <small><a href="/" data-toggle="modal" data-target="#modalPassword">Forgot password?</a></small>
                                            </div>
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        )
    }
}

export default HeaderComponent;

The problem here is the dropdown of the login option is not getting rendered. And when I minimize the window, all the options are hidden but pressing the button doesnt uncollapse the menu.

Answer 1

I think that probably you have something with an higher z-index because your code currently works in the React JSFiddle: https://jsfiddle.net/x9g7683t/

HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

I've imported all Bootstrap scripts (maybe can help).

The code is a copy and paste of your component render.