render() { const {theme} = this.state; const themeClass = theme ? theme.toLowerCase() : 'default'; return ( <div> <DropdownButton id="SplitButton" size="large" bsstyle={themeClass} title={`${theme || 'Default'} Theme`}> <Dropdown.Item eventKey="Primary" onSelect={this.chooseTheme}>Primary Theme</Dropdown.Item> <Dropdown.Item eventKey="Danger" onSelect={this.chooseTheme}>Danger Theme</Dropdown.Item> <Dropdown.Item eventKey="Success" onSelect={this.chooseTheme}>Success Theme</Dropdown.Item> <Dropdown.Divider/> <Dropdown.Item eventKey="Reset" onSelect={this.chooseTheme}>Default Theme</Dropdown.Item> </DropdownButton> <span className={`h1 center-block text-center text-${theme ? themeClass : 'muted'}`}> {theme || 'Default'} Theme </span> </div> ); }
const Cart = (props)=>{ console.log(props.itemCount) return( <NavDropdown title={ <span className="text-primary my-auto" id="myDrop">Panier({props.itemCount})</span>} id="basic-nav-dropdown" onClick={()=>props.toggleCartHidden()} > <center> {props.cartItems.length ? props.cartItems.map(item => <NavDropdown.Item key={item.id} href="#"> <img width="30" src={item.imageUrl} alt=""/> {item.name} </NavDropdown.Item> ) : <p>Cart is empty</p>} </center> <center> <Link className="btn btn-dark" to="/checkout">CheckOut</Link> </center> </NavDropdown> ); }
<Nav.Link href="#pricing">Pricing</Nav.Link> <NavDropdown title="Dropdown" id="collasible-nav-dropdown"> <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item> <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item> <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item> </NavDropdown> </Nav> <Nav> <NavDropdown title={<i className="far fa-user" />} id="collasible-nav-dropdown"> <NavDropdown.Item onClick={logout}> Log out </NavDropdown.Item> </NavDropdown> </Nav>