I need to fetch the clicked dropdown item and log it in the console using React js.
Code:
<div onClick={this.handleSearchBtn} className="dropdown-menu">
<a className="search-item dropdown-item" href="#" >Authors</a>
<a className="search-item dropdown-item" href="#">Article Title</a>
<a className="search-item dropdown-item" href="#">PMID</a>
<a className="search-item dropdown-item" href="#">Mesh Terms</a>
</div>
From my understanding, you can do something like this
class Anchor extends React.Component {
state = {
selected: ''
}
handleSearchBtn = (event) => {
if (event.target.className.indexOf("search-item") !== -1) {
this.setState({ selected: event.target.text });
}
};
render() {
return (
<div onClick={this.handleSearchBtn} className="dropdown-menu">
selected: {this.state.selected}
<a className="search-item dropdown-item" href="#">
Authors
</a>
<a className="search-item dropdown-item" href="#">
Article Title
</a>
<a className="search-item dropdown-item" href="#">
PMID
</a>
<a className="search-item dropdown-item" href="#">
Mesh Terms
</a>
</div>
);
}
}
ReactDOM.render(<Anchor />, document.getElementById("root"));
Here is the demo
Hope it helps :)
Related
I am using bootstrap 5.1 without third-party libaries like react-bootstrap or ... in my React App.
I am able to see the dropdown button is working properly on my react app but I cannot capture the values on selecting different options of drop down. I tried to replace the <a> tags with <option value='...'> but wasn't successful . Any idea ?
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
The a tag doesn't support value attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
Similarly, you can't have option tag without a select/datalist/optgroup (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option).
If you need some type of value associated with the tags anyway, use something like: data-value={your_value}. And then work with the dataset of the element clicked.
You can try with the below code
export default function App() {
const onChangeClick = (value) => {
console.log(value);
};
return (
<div class="dropdown">
<a
class="btn btn-secondary dropdown-toggle"
href="#"
role="button"
id="dropdownMenuLink"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li>
<a
class="dropdown-item"
href="#"
onClick={() => onChangeClick("action")}
>
Action
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
onClick={() => onChangeClick("another action")}
>
Another action
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
onClick={() => onChangeClick("else action")}
>
Something else here
</a>
</li>
</ul>
</div>
);
}
I'm new to react.js. in my code, I would like to pass these menu items such as dashboard, Customer,.. as props, and I would like to use a map on it. but t i got the same icon <i className="fas fa-home mr-3"> for all of the menu items. also how I can use the default props for them? could you explain this in two ways ( map and default props)
import "./Sidebar.css";
import React, { Component } from "react";
class Sidebar extends Component {
constructor(props) {
super(props);
this.state = {
menuItems: [
"Dashboard",
"Customer",
"Category",
"Transaction",
"Pick-up",
"Stock",
"Financial",
"Report",
],
};
}
render() {
return (
<div className="wrapper d-flex align-items-stretch">
<nav id="sidebar">
<div className="custom-menu">
<button
type="button"
id="sidebarCollapse"
className="btn btn-primary"
>
<i className="fa fa-bars"></i>
<span className="sr-only">Toggle Menu</span>
</button>
</div>
<div className="p-4">
<h1>
<a href="index.html" className="logo">
Donyaro{" "}
</a>
</h1>
<ul className="list-unstyled components mb-5">
{this.state.menuItems&&this.state.menuItems.lenght?this.state.menuItems:[]}
{this.state.menuItems.map((item) => (
<li className="active">
<a href={" "}>
<i className="fas fa-home mr-3"></i>
{item}
</a>
</li>
))}
</ul>
</div>
<div class="footer">
<a href={" "}>
<i className="fas fa-caret-down"></i>
</a>
<h6>
<span>Welcome, </span>
<a href="index.html" className="add-business">
Add Business
</a>
</h6>
</div>
</nav>
</div>
);
}
}
export default Sidebar;
map is a pure function that returns new array based on an array exmple :
const array=[1,2,3,4];
const newArr=array.map(el=>el+'a')
console.log(newArr)=>["1a", "2a", "3a", "4a"];
this is all map doing it iterate over every element of the old array and gives
back a new array based on what you want to do with the old array.it is very
useful.
I think you do the function right but your problem is with jsx you should wrap your
li element with a div like this
{this.state.menuItems.map((item) => (
<div>
<li className="active">
<a href={" "}>
<i className="fas fa-home mr-3"></i>
{item}
</a>
</li>
</div>
))}
**
I am trying to do responsive navbar by using bootstrap in reactjs.I have update the show in state so as i do like show or hide the element but the toggle button is not trigger.If i use the script link in bootstrap its working but i don't want to use the scripting links and want to update manual.so help me out.
Here is my code:
import React, { Component } from "react";
export default class NavBar extends Component {
constructor(props) {
super(props);
this.state = {
show: true,
};
}
showToggle = () => {
this.setState({
show: false,
});
};
render() {
return (
<div className="container-fluid">
<div className="row">
<div className="col-lg-12 col-md-12 col-sm-12">
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="navbar-brand">
<img
alt="logo"
src="./images/or.png"
width="100px"
height="30"
className="d-inline-block align-top img-fluid"
/>
{/* <span className="nav-brand">Ortho Life Hospital</span> */}
</div>
<button
className="navbar-toggler"
type="button"
// data-toggle="collapse"
// data-target="#navbarSupportedContent"
// aria-controls="navbarSupportedContent"
// aria-expanded="false"
// aria-label="Toggle navigation"
onClick={this.showToggle}
>
<span className="navbar-toggler-icon"></span>
</button>
{this.state.show ? (
<div
className="collapse navbar-collapse"
id="navbarSupportedContent"
>
<ul className="navbar-nav ml-auto">
<li className="nav-item ml-5">
<a className="nav-link" href="/">
Home
</a>
</li>
<li className="nav-item ml-5">
<div className="dropdown">
<a
className="nav-link"
href="/about"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
About Us
</a>
<div
className="dropdown-menu"
aria-labelledby="dropdownMenuButton"
>
<a className="dropdown-item" href="/about/#history">
History
</a>
<a className="dropdown-item" href="/about/#vision">
Vision and Mission
</a>
<a className="dropdown-item" href="/about/#whyortho">
Why Ortho?
</a>
</div>
</div>
</li>
<li className="nav-item ml-5">
<div className="dropdown">
<a
className="nav-link"
href="/department"
id="dropDownDepartment"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Department
</a>
<div
className="dropdown-menu"
aria-labelledby="dropDownDepartment"
>
<a
className="dropdown-item"
href="/department/#medical"
>
Medical
</a>
<a
className="dropdown-item"
href="/department/#allied"
>
Allied
</a>
</div>
</div>
</li>
<li className="nav-item ml-5">
<a className="nav-link" href="/media">
Media
</a>
</li>
<li className="nav-item ml-5">
<a className="nav-link" href="/contactus">
Contact Us
</a>
</li>
</ul>
</div>
) : null}
</nav>
</div>
</div>
</div>
);
}
}
I can´t pass the parameters from a child component to a parent component using the same event handler.
My components' tree follows this structure:
ProductList
ProductsGrid
PaginationBar
In the ProducList component I have this event handler
handlePagination = (index) => { bla bla bla }
<PaginationBar
OnPagination={(index) => this.handlePagination(index)}
pages={this.state.pages}
/>
In the Pagination Bar when I render the page.
render() {
return (
<nav aria-label="Catalog page navigation">
<ul className="pagination">
<li className={this.navButtonEnabled(0)} key="page-item-0">
<a
className="page-link"
onClick={this.props.OnPagination(0)}
href="#"
aria-label="Previous"
>
<span aria-hidden="true">Previous 3</span>
</a>
</li>
<li className={this.navButtonEnabled(1)} key="page-item-1">
<a
className="page-link"
onClick={this.props.OnPagination(1)}
href="#"
>
<span aria-hidden="true">
{this.navButtonDisplay(this.props.pages.navigation[1])}
</span>
</a>
</li>
<li className={this.navButtonEnabled(2)} key="page-item-2">
<a
className="page-link"
onClick={this.props.OnPagination(2)}
href="#"
>
<span aria-hidden="true">
{this.navButtonDisplay(this.props.pages.navigation[2])}
</span>
</a>
</li>
<li className={this.navButtonEnabled(3)} key="page-item-3">
<a
className="page-link"
onClick={this.props.OnPagination(3)}
href="#"
>
<span aria-hidden="true">
{this.navButtonDisplay(this.props.pages.navigation[3])}
</span>
</a>
</li>
<li className={this.navButtonEnabled(4)} key="page-item-4">
<a
className="page-link"
onClick={this.props.OnPagination(4)}
href="#"
aria-label="Next"
>
<span aria-hidden="true">Next 3</span>
</a>
</li>
</ul>
</nav>
);
}
}
In the onClick event, I call the event handler with the index number (this is the parameter I want to pass), according the button clicked I render correctly the ProductsGrid. But it doesn't work at all, I tried several approaches, I just want to pass a number via a parameter for a lifting up event handler. What am I doing wrong?
This is the error presented in the console.
react_devtools_backend.js:6 Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.
in Pagination (created by Catalog)
in Catalog (created by App)
in main (created by App)
in App
I am not changing any state during the render process, the event handler changes the status, when the button is clicked. This is not a render process.
Please replace
onClick={this.props.OnPagination(0)}
With
onClick={() => {this.props.OnPagination(0)}}
Here is complete code (I have commented some code so that I can run this easily to my end):
import React from "react";
export default class ProductList extends React.Component {
handlePagination = (index) => {
console.log(index, 'index');
};
render() {
return (
<PaginationBar OnPagination={(index) => this.handlePagination(index)}
// pages={this.state.pages}
/>
);
}
}
class PaginationBar extends React.Component {
render() {
return (
<nav aria-label="Catalog page navigation">
<ul className="pagination">
<li key="page-item-0">
<a
className="page-link"
onClick={() => {this.props.OnPagination(0)}}
href="#"
aria-label="Previous"
>
<span aria-hidden="true">Previous 3</span>
</a>
</li>
<li key="page-item-1">
<a
className="page-link"
onClick={() => {this.props.OnPagination(1)}}
href="#"
>
<span aria-hidden="true">
{/*{this.navButtonDisplay(this.props.pages.navigation[1])}*/}
Previous 2
</span>
</a>
</li>
<li key="page-item-2">
<a
className="page-link"
onClick={() => {this.props.OnPagination(2)}}
href="#"
>
<span aria-hidden="true">
{/*{this.navButtonDisplay(this.props.pages.navigation[2])}*/}
Previous 1
</span>
</a>
</li>
<li key="page-item-3">
<a
className="page-link"
onClick={() => {this.props.OnPagination(3)}}
href="#"
>
<span aria-hidden="true">
{/*{this.navButtonDisplay(this.props.pages.navigation[3])}*/}
Next 2
</span>
</a>
</li>
<li key="page-item-4">
<a
className="page-link"
onClick={() => {this.props.OnPagination(4)}}
href="#"
aria-label="Next"
>
<span aria-hidden="true">Next 3</span>
</a>
</li>
</ul>
</nav>
);
}
}
I'm trying to put a dropdown menu in my navbar. I'm using the materialize framework, and so far this is the only materialize javascript element I can't get to work. Here's the code I am using for the navbar:
import React, { Component } from "react";
import M, { Dropdown } from "materialize-css";
class Navbar extends Component {
componentDidMount() {
M.Dropdown.init(this.Dropdown);
}
render() {
return (
<div className="navbar-fixed">
<nav>
<div class="nav-wrapper purple">
<a href="/" class="brand-logo">
Logo
</a>
<a class="dropdown-trigger btn right" data-target="dropdown1">
Drop Me!
</a>
<ul
id="dropdown1"
class="dropdown-content"
ref={Dropdown => {
this.Dropdown = Dropdown;
}}
>
<li>
one
</li>
<li>
two
</li>
<li class="divider" tabindex="-1" />
<li>
three
</li>
<li>
<a href="#!">
<i class="material-icons">view_module</i>four
</a>
</li>
<li>
<a href="#!">
<i class="material-icons">cloud</i>five
</a>
</li>
</ul>
</div>
</nav>
</div>
);
}
}
export default Navbar;
Essentially I click the element and nothing happens. Not sure what I'm doing wrong, and I can't find anything similar on Stack overflow. Here's the code sandbox... https://codesandbox.io/s/dawn-snow-3cmdv
Thanks!