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"]} />
Related
I'm trying to make a dropdown menu from react-bootstrap package component, I copied exactly same component mentioned in the documentation here. The dropdown style is coming fine but the dropdown is not opening.
Here is the code:-
import { DropdownButton, Dropdown } from "react-bootstrap";
export default function Menu(){
return(
<>
<DropdownButton id="dropdown-basic-button" title="Drop">
<Dropdown.Item href="#">Action</Dropdown.Item>
<Dropdown.Item href="#">Another action</Dropdown.Item>
<Dropdown.Item href="#">Something else</Dropdown.Item>
</DropdownButton>
</>
)
}
While clicking on the Drop button, dropdown items are not opening
I am working in a team project where we are using react bootstrap nav bar. We want the drop down manu to open on mouse hover. Couldn't find any satisfactory answer yet. Please help.
import { useState } from "react";
import { Dropdown } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
const [show, setShow] = useState(false);
return (
<Dropdown
onMouseOver={() => setShow(true)}
onMouseLeave={() => setShow(false)}
>
<Dropdown.Toggle className="main-style" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu show={show}>
<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 App;
https://react-bootstrap.netlify.app/components/dropdowns/
i found that you can controll react-bootstrap Dropdown.Menu by show props
I have seen a hundred videos and read about this, and it still doesn't make sense to me. I'm trying to update an array on a button click but when I log out the items array, it's one behind, meaning it's not reactive and gets added on the next paint. Also, I wrapped my Employee component inside a div only to be able to add an 'onClick' to it. Ideally, I'd like the onClick to be on the Employee component itself, but it doesn't work. Thanks.
import React, {ReactElement, useState } from "react";
import {TextContainer, Text } from "react-md";
import model from '../Models'
import Employee from './Employee/Employee'
import styles from '../home.module.scss'
export default function Home(): ReactElement {
const [items, setItems] = useState<Array<any>>([]);
const addItem = (val:any) => {
setItems([...items, val ])
console.log('items :', items)
}
return (
<div className='center'>
<TextContainer className='center'>
<Text type='headline-4' style={{color: 'white'}}>Employee List</Text>
</TextContainer>
<section className={styles.emp_list}>
{model.map((props, index) =><div key={index} onClick={() => addItem(props.name)}><Employee key={index} name={props.name} role={props.role} markets={props.markets} image={props.image}/></div>)}
</section>
</div>
)}
And my Employee component:
import React from "react";
import {MediaContainer} from "#react-md/media";
import styles from './employee.module.scss'
import { Card, CardContent, CardHeader} from "react-md";
function Employee(props: any) {
return (
<Card className={styles.emp_card}>
<CardHeader>
<div className={styles.emp_text}>
<p key={props.name}>Name: {props.name}</p>
<p key={props.role}>Title: {props.role}</p>
<p key={props.markets}>Markets: {props.markets[0]} {props.markets[1] && <span>and {props.markets[1]}</span>}</p>
</div>
</CardHeader>
<CardContent>
<MediaContainer>
<img key={props.image} src={props.image} alt="employee"/>
</MediaContainer>
</CardContent>
</Card>
)
}
export default Employee;
I don't think the documentation is clear enough on this, but if you want to setState using the previous state, then you should pass a function to useState. For example:
const addItem = (val:any) => {
setItems(prevItems => [...prevItems, val ])
}
https://reactjs.org/docs/hooks-reference.html#functional-updates
i install the bloomer and bulma. However i already import the dropdown. but whenever i click the dropdown menu is not showing. Can someone help me why? Thank you
This is the code:
https://codesandbox.io/s/fancy-tree-9vvf6?file=/src/App.js:34-130
There is an open issue about it on github
It means that you can start your contribution in open source and try to solve it or just use this workaround:
import { useState } from "react";
import "./styles.css";
import {
DropdownContent,
Dropdown,
DropdownItem,
DropdownTrigger,
Button,
Icon,
DropdownMenu
} from "bloomer";
import "bulma/css/bulma.min.css";
export default function App() {
const [isActive, setIsActive] = useState(false);
return (
<div className="App">
<Dropdown isActive={isActive}>
<DropdownTrigger onClick={(prev) => setIsActive(!prev)}>
<Button isOutlined aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<Icon icon="angle-down" isSize="small" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownContent>
<DropdownItem href="#">First item</DropdownItem>
<DropdownItem href="#" isActive>
Second item
</DropdownItem>
<DropdownItem href="#">Third item</DropdownItem>
</DropdownContent>
</DropdownMenu>
</Dropdown>
</div>
);
}
https://codesandbox.io/s/runtime-morning-0utb9?file=/src/App.js
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