Category : react-bootstrap

I am using React. I have 2 class components: MyPage NewComponent (path: /api/pages/components/new) Here is my NewComponent class: import React from ‘react’; import { Modal } from ‘react-bootstrap’; class NewComponent extends React.Component{ constructor(props){ super(props); } render(){ return( <Modal.Dialog> <Modal.Header> <Modal.Title>New Component</Modal.Title> </Modal.Header> </Modal.Dialog> ); } } export default NewComponent; Here is my Page class: import ..

Read more

Index.tsx: import ‘./index.scss’; Top of index.scss: @import ‘./scss/main.scss’; main.scss @import ‘./custom’; _custom.css @import "node_modules/bootstrap/scss/bootstrap"; $theme-colors: ( "primary": #ff0000, "danger": #ff4136 ); Login.tsx <div className="card"> <div className="card-body"> <h5 className="card-title">Login</h5> <h6 className="card-subtitle mb-2 text-muted">Log in</h6> <Form> <Form.Group controlId="formBasicEmail"> <Form.Label>Email</Form.Label> <Form.Control type="email" placeholder="Enter email" /> </Form.Group> <Form.Group controlId="formBasicPassword"> <Form.Label>Password</Form.Label> <Form.Control type="password" placeholder="Password" /> </Form.Group> <Button variant="primary" type="submit"> Submit ..

Read more

Using pre-built components from: https://react-bootstrap.github.io/components/navs/ https://react-bootstrap.github.io/components/navbar/ I’m trying to build a navigation bar, but getting the following error: Unhandled Runtime Error TypeError: _camelize.default is not a function http://localhost:8080/_snowpack/pkg/react-bootstrap.Navbar.v1.5.2.js [:41:55] [email protected]://localhost:8080/_snowpack/pkg/react-bootstrap.Navbar.v1.5.2.js:41:55 [email protected]://localhost:8080/_snowpack/pkg/react-bootstrap.Navbar.v1.5.2.js:48:51 Navbar_1<@http://localhost:8080/_snowpack/pkg/react-bootstrap.Navbar.v1.5.2.js:603:50 [email protected]://localhost:8080/_snowpack/pkg/react-bootstrap.v1.5.2/common/createChainedFunction-36b17a02.js:14:5 @http://localhost:8080/_snowpack/pkg/react-bootstrap.Navbar.v1.5.2.js:570:36 This is not the first use of react-bootstrap components on this project – others have worked fine. The problem started specifically ..

Read more

I have a simple Accordion in one of my components. function CustomToggle({eventKey}) { const [children, setChildren] = useState(‘Mais filtros 🠗’) const decoratedOnClick = useAccordionToggle(eventKey, () => setChildren(children === ‘Mais filtros 🠗’ ? ‘Menos filtros 🠕’ : ‘Mais filtros 🠗’) ) return ( <div className="text-center"> <div className="tag align-center" onClick={decoratedOnClick}> {children} </div> </div> ) } … <Accordion> ..

Read more

I have the following problem. I am making a react application and want to use LinkContainers inside my navbar, but the problem is that when I use them like that: import React from ‘react’; import { Navbar,Nav,NavDropdown,Form,FormControl} from ‘react-bootstrap’; import { LinkContainer } from ‘react-router-bootstrap’; import { BrowserRouter } from ‘react-router-dom’; import ‘bootstrap/dist/css/bootstrap.min.css’; function Header() ..

Read more

Making a Single Page Application and decided to try react-router-hash-link. It works as intended but seems that a side-effect was the Navbar collapseOnSelect has stopped working. Thought it could’ve been because I included the HashLink as Link instead of using Nav.Link but that couldn’t have been it because it was working with LinkContainer just before ..

Read more