I already installed react-bootstrap with yarn yarn add react-bootstrap bootstrap.
I am using dropdown component but when I display it, it doesn't show like it's suppose to:
This is what I need
This is my code for that
import React from "react";
import { Dropdown } from "react-bootstrap";
// import PropTypes from "prop-types";
import "../Dropdown/index.css";
const DropdownItem = () => {
return (
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
export default DropdownItem;
I don't know why the dropdown is unstyled.
That's because you might not have imported the CSS in your index.html file.
You need to add something like this in your projects public/index.html file
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
OR
You can import the CSS in your App.js or index.js file like this
import 'bootstrap/dist/css/bootstrap.min.css';
You can check more about it in the react-bootstrap docs
Related
I work on react project and use emotion library for styling inside .js file. Syntax highlighting in #emotion/styled works with no issue, but css function from #emotion/react causes some sort of syntax highlighting bug. Can someone tell me how to solve the issue?
import React from "react";
import { Link } from "react-router-dom";
import { css } from "#emotion/react";
import Layout from "../components/Layout";
import Heading from "../components/atoms/Heading";
import Paragraph from "../components/atoms/Paragraph";
import Button from "../components/atoms/Button";
export default function Home() {
return (
<Layout
pageTitle="Home"
css={css`
display: flex;
`}
>
<Heading>HaxBall Clone</Heading>
<Paragraph>
HaxBall clone made with react and pixi.js.
<br />
Original game:{" "}
<a href="https://haxball.com" target="_blank" rel="noreferrer">
HaxBall.com
</a>
</Paragraph>
<Button as={Link} to="/enter-user">
Play!
</Button>
</Layout>
);
}
I am customizing the Dropdown from the react-bootstrap react to create the component, but I have trouble retrieving the props.
This is my code in index.js, src/components/Dropdown/index
import React from 'react';
import {Dropdown} from 'react-bootstrap';
import '../Dropdown/index.css'
const DropdownItem = (name) => {
return(
<Dropdown>
<Dropdown.Toggle className="dropdown-button">
Selection
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu">
<Dropdown.Item href="#/action-1">{name}</Dropdown.Item>
<Dropdown.Item href="#/action-2">{name}</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
export default DropdownItem;
The name I will render from app.js(src/app) is passed into the dropdown item like this
< DropdownItem name="Milk Tea"/>
But If I have a lot of items, how can I print them all in one dropdown group?
I can not do like this
< DropdownItem name="Milk Tea"/>
< DropdownItem name="Fruit"/>
It's will render many dropdowns not drop item
Your help is very useful
You got the child component logic wrong.
Your Child component is the whole Dropdown component as per I can see your code.
Therefore, you will have to pass down array of names as props.
Example.
import React from "react";
import { Dropdown } from "react-bootstrap";
import "../Dropdown/index.css";
const DropdownItems = ({ nameList }) => {
return (
<Dropdown>
<Dropdown.Toggle className="dropdown-button">Selection</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu">
{nameList.map((name, index) => (
<Dropdown.Item href={`#/action-${index}`}>{name}</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
);
};
In App.js
<DropdownItems nameList={["Milk Tea","Fruit"]} />
I want to use the react Dropdownbutton to build a list, but i receive the following error :
TypeError: react_dropdown__WEBPACK_IMPORTED_MODULE_6__.Dropdown is undefined
Here is my code :
render() {
return (
<div className="Upload">
{this.renderNotes()}
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
);
And the import :
import { Dropdown } from "react-dropdown";
I have install it using the command : npm install react-dropdown --save
EDIT : I had to use import Dropdown from "react-dropdown";
But now the website compiles, but the list does not display...
Your are trying to import a named export. However react-dropdown exports that module as the default. import it like so
import Dropdown from 'react-dropdown'
also, make sure you import the styles for this component
import 'react-dropdown/style.css'
I have problems importing UI libraries, I had problem with ant design library so I decided to try different one, now I have problem importing Grommet.
What am I doing wrong? I added dependencies according documentation and added examples included in documentation yet still not working.
I am trying to execute this code from documentation
But it doesn't look the same at all
I work with codesandbox.io, here is link for the code on it
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Heading from "grommet/components/Heading";
import Box from "grommet/components/Box";
import Header from "grommet/components/Header";
import Title from "grommet/components/Title";
import Search from "grommet/components/Search";
import Menu from "grommet/components/Menu";
import Anchor from "grommet/components/Anchor";
import "grommet-css";
class HelloWorldApp extends React.Component {
render() {
return (
<div>
<Header>
<Title>Sample Title</Title>
<Box flex={true} justify="end" direction="row" responsive={false}>
<Search
inline={true}
fill={true}
size="medium"
placeHolder="Search"
dropAlign={{right: "right"}}
/>
<Menu dropAlign={{right: "right"}}>
<Anchor href="#" className="active">
First
</Anchor>
<Anchor href="#">Second</Anchor>
<Anchor href="#">Third</Anchor>
</Menu>
</Box>
</Header>
<Box>
<Heading>
Hello, I'm a Grommet Component styled with
grommet-css
</Heading>
</Box>
</div>
);
}
}
var element = document.getElementById("root");
ReactDOM.render(<HelloWorldApp />, element);
So according to your code:
<Menu dropAlign={{right: "right"}}>
was missing the icon attribute, without which the Menu component directly renders the Anchor, the menu-items component.
add import for the icon of your choosing, i.e: Actions ( from the example )
import Actions from 'grommet/components/icons/base/Actions';
add the icon attribute to the Menu component:
<Menu
icon={<Actions />}
dropAlign={{ right: 'right' }}
>
<Anchor href="#" className="active">First</Anchor>
<Anchor href="#">Second</Anchor>
<Anchor href="#">Third</Anchor>
</Menu>
here's a codesandbox.io link which fixes your issue:
https://codesandbox.io/s/237xo7y48p
I develop react + meteor app, then I got error like this,
I try to add navigation https://react-bootstrap.github.io/components.html#navigation, get data in this tutorial . I try to add this const like below way
MainComponent
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { Button } from 'react-bootstrap';
import AccountsUIWrapper from './AccountsUIWrapper.jsx';
// App component - represents the whole app
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
hideCompleted: false,
};
}
render() {
const navbarInstance = (
<Navbar>
<Navbar.Header>
<Navbar.Brand>
React-Bootstrap
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.4}>Separated link</MenuItem>
</NavDropdown>
</Nav>
</Navbar>
);
return (
<div>
{navbarInstance}
<div className="container">
<div className="row">
<div className="navbar nav-inline">
<AccountsUIWrapper />
</div>
</div>
<header>
<h1>School Attendance</h1>
<h3>Lecturer Report</h3>
</header>
<h4>This is home</h4>
</div>
</div>
);
}
}
but I got bellow error. and there reason as like me.
There add some import
import { Button, Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
like this then vanish the error, but I got like this
I want to correct way to Navbar add
The classes you call in render are not defined.
Where you have import {Button} from 'react-bootstrap' you need to import every component that you plan on using in your file ( that is part of that framework ).
The solution would be adding Navbar, like so:
import { Button, Navbar } from 'react-bootstrap'
Also have you included Bootstrap styles in your project?
https://react-bootstrap.github.io/getting-started/introduction
firstly install react bootstrap
npm install react-bootstrap bootstrap
// or use yarn
yarn add react-bootstrap bootstrap
also you need to import Navbar as well you can use this code
import Navbar from 'react-bootstrap/Navbar'
// or
import { Navbar } from 'react-bootstrap'
for the styling you need to add bootstrap styles. How and which Bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>