We Keep Coding

sidebar menu with dropdown in react js

i am trying to create a sidebar with drop down
like this example in react js
https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp
i was able to design it using react the issue is that when i click on a inner li
the dropdown closes i dont want it to close
this.state = { isOpen: false, }
Clickhandler() {
this.setState({ isOpen: !this.state.isOpen });
}
<li style={styles.listItem}
onClick={this.Clickhandler}
className={this.state.isOpen ? "admintabs" : ""}
>
<div>
<FontAwesomeIcon
icon={faHistory}
style={{ marginRight: "1rem" }}
/>
</div>
<div> Internal users</div>
<div>
{" "}
<FontAwesomeIcon icon={faCaretDown} />
</div>
</li>
{this.state.isOpen ? (
<>
<NavLink
to="/admin/saler"
activeClassName="active3"
onClick={this.Clickhandler}
>
<li style={styles.listItem}>
<div>
<FontAwesomeIcon
icon={faCube}
style={{ marginRight: "1rem" }}
/>
</div>
<div> saler</div>
</li>
</NavLink>
<NavLink
to="/admin/con"
activeClassName="active3"
onClick={this.Clickhandler}
>
<li style={styles.listItem}>
<div>
<FontAwesomeIcon
icon={faBriefcaseMedical}
style={{ marginRight: "1rem" }}
/>
</div>
<div> Con</div>
</li>
</NavLink>
</>
) : null}
my code is too big so i added in codesand box
https://codesandbox.io/s/stupefied-hooks-9qm66s?file=/src/App.js

render two components in react conditional

currently working on a simple navbar component. The following is my code:
{isLoggedIn ?
<Navbar.Brand ><Link to="/" style={{ textDecoration: 'none' }} onClick={() => dispatch(logoutUser())}>Logout</Link></Navbar.Brand>
:
<Navbar.Brand ><Link to="/registration" style={{ textDecoration: 'none' }}>Register</Link></Navbar.Brand>
<Navbar.Brand ><Link to="/login" style={{ textDecoration: 'none' }}>Login</Link></Navbar.Brand>
}
When the user is logged in, I want a logout button to appear, and when they are not logged in I want both register and login buttons to appear. But I cannot do both at the same time when isLoggedIn is false. Any way to do this?
Thank you!

{isLoggedIn ? <Navbar.Brand ><Link to="/" style={{ textDecoration: 'none' }} onClick={() => dispatch(logoutUser())}>Logout</Link></Navbar.Brand>
: <div>
<Navbar.Brand ><Link to="/registration" style={{ textDecoration: 'none' }}>Register</Link></Navbar.Brand>
<Navbar.Brand ><Link to="/login" style={{ textDecoration: 'none' }}>Login</Link></Navbar.Brand>
</div>
}
Edit: as suggested below, it is also possible to wrap between fragments.

Using react-scroll (Link) while using react-boostrap Nav.Link?

I was able to set up responsive navbar using react-bootstrap, but when I tried using Link from react-scroll withing Nav.Link
<Nav.Link href='projects'>
<Link
activeClass='active'
to='homepage'
spy={true}
smooth={true}
offset={-70}
duration= {500}
>
Projects
</Link>
</Nav.Link>
I would get an error on the browser stating <a> cannot appear as a descendant of a <a>. I tried to change Nav.Link to Nav.Item and change styles of link accordingly, but once I remover Nav.Link the collapseOnSelect feature stops working in my Navbar for mobile.
import React from 'react';
import Scroll from 'react-scroll';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import { ReactComponent as GithubIcon } from '../../assets/github.svg';
import { ReactComponent as TwitterIcon } from '../../assets/twitter.svg';
class Header extends React.Component {
render() {
return (
<div className='header' style={{ fontFamily: 'Fira Code, monospace' }}>
<Navbar className='shadow-lg' style={{ backgroundColor: '#2C3E50' }} collapseOnSelect expand="lg" fixed="top">
<Navbar.Brand onSelect={() => Scroll.scrollTo('Homepage', {
smooth: true,
offset: -70,
duration: 500
})}>
Name
</Navbar.Brand>
<Navbar.Toggle aria-controls='responsive-navbar-nav'/>
<Navbar.Collapse id='responsive-navbar-nav'>
<Nav className='mr-auto'>
<Nav.Link onSelect={() => Scroll.scrollTo('projects', {
smooth: true,
offset: -70,
duration: 500
})}>
Projects
</Nav.Link>
<Nav.Link onSelect={() => Scroll.scrollTo('contact', {
smooth: true,
offset: -70,
duration: 500
})}>
Contact
</Nav.Link>
</Nav>
<Nav className='ml-auto'>
<Nav.Link
href='https://github.com/jgil-r'
target='_blank'
rel='noopener noreferrer'
style={{
paddingLeft: '.5rem',
paddingRight: '.5rem'
}}
>
<GithubIcon />
</Nav.Link>
<Nav.Link
href='https://twitter.com/chuygil7273'
target='_blank'
rel='noopener noreferrer'
style={{
paddingLeft: '.5rem',
paddingRight: '.5rem'
}}
>
<TwitterIcon />
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}
export default Header;
import React from 'react';
import './projects.styles.scss';
const Projects = () => (
<div className='projects-container' id='projects'>
<h1>Projects</h1>
</div>
);
export default Projects;

Since both Nav.Link and Link are components that render to <a> you can't include a Link inside of a Nav.Link.
You can use the onSelect property on the Nav.Link to add scrolling effects (and remove the Link from react-scroll) or set the Nav.Link as property to div.
import Scroll from 'react-scroll';
// ...
<Nav.Link
onSelect={() => Scroll.scrollTo('homepage', {
smooth: true,
offset: -70,
duration: 500,
})}
>
</Nav.Link>

Probably too late but hopefully someone else struggling on this can find this helpful
For me, Scroll.ScrollTo wasn't working
Instead, try importing scroller and use the scrollTo like this
import { scroller } from "react-scroll";
//...
<Nav.Link
onClick={() => scroller.scrollTo('homepage', {
smooth: true,
offset: -70,
duration: 500,
})}
>
</Nav.Link>
Note: I am also using onClick instead of onSelect

Solution:
import { Link } from "react-scroll";
//...
<Nav className="mr-auto">
<li className="nav-item">
<Link
href="#home"
to="home"
activeClass="active"
className="nav-link"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Home
</Link>
</li>
</Nav>

Issue with React Router and Semantic UI React

I am new to ReactJS and have an issue with using "Menu.Item" (from Semantic UI React) and React Router.
My imports etc will be left out of the below code but they are all working fine.
My "App.jsx" constructor is as follows:
constructor(props) {
super(props);
this.state = {
activeItem: 'home',
loading: true,
messages: [],
};
}
The "App.jsx" render return is this:
<Router>
<Container className="main">
<Navbar
onItemClick={selected => this.setState({ activeItem: selected })}
isActive={this.state.activeItem}
/>
<Container className="main-content">
<Switch>
<Route exact path="/" component={Home} />
<Route path="/dashboard" component={Dashboard} />
<Route path="/user" component={User} />
</Switch>
</Container>
</Container>
</Router>
For clarification, the Home, User, and Dashboard components are just simple Div's that has their respective names in them.
My Navbar is as follows:
class Navbar extends Component {
onItemChange = (e, { name }) => this.props.onItemClick(name);
render() {
return (
<div>
<Container>
<Menu secondary stackable widths={4}>
<Menu.Item>
<img src={Logo} alt="header" />
</Menu.Item>
<Menu.Item
as={NavLink}
to="/"
name="home"
active={this.props.isActive === 'home'}
onClick={(event, name) => this.handleClick(name.name, name.to)}
>
<Icon name="home" size="large" />
<p>Home</p>
</Menu.Item>
<Menu.Item
as={NavLink}
to="/dashboard"
name="Data"
active={this.props.isActive === 'Data'}
onClick={this.onItemChange}
>
<Icon name="dashboard" size="large" />
<p>Dashboard</p>
</Menu.Item>
<Menu.Item
as={NavLink}
to="/user"
name="user"
active={this.props.isActive === 'user'}
onClick={this.onItemChange}
>
<Icon name="user" size="large" />
<p>User</p>
</Menu.Item>
</Menu>
</Container>
</div>
);
}
}
As you can see from the above Navbar, I am using NavLink within the Menu.Item.
Here is where the issue arises. When I start my application it works fine, 'home' is displayed, however when I click on a link in the Menu, the application crashes.
Any ideas on how to fix this? I also want to have it that the 'isActive' will update with the current route in the menu.
Any input would be greatly appreciated.

I fixed it for anyone looking into it by simplifying the code, here is the Navbar component:
const Navbar = () => (
<div>
<Container>
<Menu secondary stackable widths={4}>
<Menu.Item>
<img src={Logo} alt="header" />
</Menu.Item>
<Menu.Item as={NavLink} to="/" name="home">
<Icon name="home" size="large" />
<p>Home</p>
</Menu.Item>
<Menu.Item as={NavLink} to="/data" name="data">
<Icon name="dashboard" size="large" />
<p>Dashboard</p>
</Menu.Item>
<Menu.Item as={NavLink} to="/user" name="user">
<Icon name="user" size="large" />
<p>User</p>
</Menu.Item>
</Menu>
</Container>
</div>
);
Less does more, it seems. Hope this helps anyone.

modal form for signup and login rendered twice

I have a component called App which is a Main Component and it has child component like Navbar, Banner( has service type and partner component as child), Destination and many more. The routing has been used inside serviceType component which is a child of Banner component and in Navbar where signup and login form is shown in bootstrap modal.
The problem is when i click on registrate button the registration form
is shown in modal but is also shown just beneath service
type(apartment, car, experience).
Here is my code
app.js
render() {
return (
<div className="container-fluid">
<Nav
showModal={(e) => this.showModal(e)}
hideModal={() => this.hideModal()}
>
{this.state.show ?
<ModalForm
show={this.state.show}
onHide={this.hideModal()}
> {this.props.children} </ModalForm> : <span />}
</Nav>
<Banner>
{this.props.children}
</Banner>
<Destinos />
<FindIn />
<Media />
<HowItWorks />
<Footer />
</div>
);
}
routes.js
<Route path="/" component={App}>
<IndexRoute component={Apartamentos} />
<Route path="apartamentos" component={Apartamentos} />
<Route path="coche" component={Coche} />
<Route path="experiencias" component={Experiencias} />
<Route path="signup" component={Signup} />
<Route path="login" component={Login} />
</Route>
Nav.js
const Nav = (props) => (
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="collapse navbar-collapse" id="collapse-1">
<li className="btn-group regLog">
<button
className="btn btn-default"
onClick={(e) => props.showModal(e)}
>
<Link to={{ pathname: '/signup' }}>
{props.intl.formatMessage({ id: 'nav.registration.text' }) }
</Link>
</button>
<button
onClick={props.showModal}
className="btn btn-default"
>
<Link to={{ pathname: '/login' }}>
{props.intl.formatMessage({ id: 'nav.login.text' }) }
</Link>
</button>
</li>
</ul>
</div>
</div>
</nav>
</div>
);
modal-form.js
render() {
const { show, onHide, intl } = this.props;
return (
<Modal
show={show}
onHide={onHide}
dialogClassName="custom-modal"
>
<Modal.Header closeButton>
<Link to='/login' className="logTitle">
<Modal.Title id="contained-modal-title-lg">
{intl.formatMessage({ id: 'nav.login.text' })}
</Modal.Title>
</Link>
<Link to='/signup' className="logTitle">
<Modal.Title id="contained-modal-title-lg">
{intl.formatMessage({ id: 'nav.registration.text' })}
</Modal.Title>
</Link>
</Modal.Header>
<Modal.Body>
{this.props.children}
</Modal.Body>
</Modal>
);
}
I think the problem is in routes.js. I am confused due to nested component.

Don't use {this.props.children} inside <Nav/> and move this
{props.show ?
<ModalForm
show={this.state.show}
onHide={this.hideModal()}
> {this.props.children} </ModalForm> : <span />
}
to app.js file and change to
{this.state.show ?
<ModalForm
show={this.state.show}
onHide={this.hideModal()}
> {this.props.children} </ModalForm> : <span />
}

The way i could solve this problem is
app.js
render() {
return (
<div className="container-fluid">
<Nav
showModal={(e) => this.showModal(e)}
hideModal={() => this.hideModal()}
show={this.state.show}
onHide={() => this.hideModal()}
>
{this.props.children}
</Nav>
<Banner>
{ location.pathname === '/' || location.pathname === '/apartamentos' ||
location.pathname === '/coche' || location.pathname === '/experiencias' ?
this.props.children : ''
}
</Banner>
<Destinos />
<FindIn />
<Media />
<HowItWorks />
<Footer />
</div>
);
}
nav.js
const Nav = (props) => (
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="collapse navbar-collapse" id="collapse-1">
<li className="btn-group regLog">
<button
className="btn btn-default"
onClick={(e) => props.showModal(e)}
>
<Link to={{ pathname: '/signup' }}>
{props.intl.formatMessage({ id: 'nav.registration.text' }) }
</Link>
</button>
<button
onClick={props.showModal}
className="btn btn-default"
>
<Link to={{ pathname: '/login' }}>
{props.intl.formatMessage({ id: 'nav.login.text' }) }
</Link>
</button>
{props.show ?
<ModalForm
show={props.show}
onHide={props.onHide}
> {props.children} </ModalForm> : <span />
}
</li>
</ul>
</div>
</div>
</nav>
</div>
);
I don't think this is the best way. Do anyone have better solution?