My first question on S.O. let's see how it goes.
I'm trying to set the "active class" to a variable in my Home.js, and pass down the value, as a prop to my <Buddy /> component. Once there I will set that to an integer to decide what slide my text carousel goes to. I'll figure out that part (but if you know, spare me the time).
I'm using an npm package react-scroll to scroll to that component once clicked. Then the component is set to "active". I will drop some code.
Nav bar section in the Home.js component..
return (
<div className="navBar">
<div className="navItem">
<Link
activeClass='active'
to="home"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
<h2>Home</h2>
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="projects"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Projects
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="mission"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Mission
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="about"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
About
</Link>
</div>
<div className="navBar">
<Link
activeClass='active'
to="contact"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Contact
</Link>
</div>
</div>
My component sitting right beneath.
<Buddy />
Each component on my SPA/Portfolio has an id that the on my nav bar looks to go to.
//Projects.js
const Projects = () => {
return (
<div className="projectsComponent" id="projects">
</div>
)
}
So when it scrolls to the component, it sets that div? or component? to active.
// back in Home.js
<div className="navItem">
<Link
activeClass='active' <-----------
to="projects"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Projects
</Link>
</div>
I just want to set whatever I need to, into a variable in Home.js to pass down as a prop to <Buddy />. Thanks, guys! Remember it's my first question ever! Be nice!
** If you have a better idea, like when the scroll reaches that component, set the index of my carousel to 1,2,3.. let me know too. Thanks
*** I will also include my <SpeechCarousel /> component here. It lives in my <Buddy /> component and ill pass another prop to it. Thanks again.
import React, {useState} from 'react'
import Carousel from 'react-bootstrap/Carousel'
import "../styles/css/Buddy.css"
const SpeechCarousel = () => {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
return (
<div id="carousel2">
<Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
</Carousel>
</div>
)
}
export default SpeechCarousel;
Related
Im trying to use this package to implement smooth scroll within a Navbar:
https://www.npmjs.com/package/react-scroll
Here's my navbar component:
Navbar.js
import React from "react";
import { Section1, Nav, NavLink, Bars, NavMenu } from "./NavbarElements";
import { Link, animateScroll as scroll } from "react-scroll";
const Navbar = () => {
return (
<>
<Section1>
<Nav>
<Bars />
<Link
activeClass="active"
to="section2"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Home
</Link>
<Link
activeClass="active"
to="section3"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Web
</Link>
<Link
activeClass="active"
to="section4"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Games
</Link>
<Link
activeClass="active"
to="section5"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
About
</Link>
</Nav>
</Section1>
</>
);
};
export default Navbar;
and here's my App.js
App.js
import React from "react";
import "./App.css";
import Navbar from "./components/navbar";
import HomeSection from "./components/home-section";
import WebSection from "./components/web-section";
import GameSection from "./components/games-section";
import AboutSection from "./components/about-section";
function App() {
return (
<>
<Navbar />
<HomeSection id="section2" />
<WebSection id="section3" />
<GameSection id="section4" />
<AboutSection id="section5" />
</>
);
}
export default App;
What am I missing? I thought I ID'd everything correctly but maybe not? Sorry im a noob. Any glaring issues here I'm missing? Is there a better way to implement one page smooth scrolling with react?
https://imgur.com/PvRRMPL
The way react component works that anything you put in the angle bracket its gonna take it as a props here you are not setting up and id you are passing down the prop to your components
<HomeSection id="section2" /> //this is passing props to your homeSection Component
here is how you can fix it:
const HomeSection (props) =>{
return(
<div id={props.id}> //your parent div
</div>
)
or you can wrap it like that
<div id="id="section2"">
<HomeSection />
</div>
If anyone ever sees this and needs a solution, you need to wrap <Element> tags around the component like so:
import { Element } from "react-scroll";
const HomeSection = () => {
return (
<>
<Element id="section2" name="home">
<Section2>
/* CODE */
</Section2>
</Element>
</>
);
};
export default HomeSection;
I'm using Next.js latest version for making my blog website, don't know why show me error, when I'm trying to make my form then show me error like this:
Warning: Function components cannot be given refs.
Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
I'm tried below code:
import React, { useState } from "react";
import { APP_NAME } from "../config";
import Link from "next/link";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
} from "reactstrap";
const Header = () => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar color="light" light expand="md">
<Link href="/">
<NavbarBrand className="font-weight-bold">{APP_NAME}</NavbarBrand>
</Link>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="m-auto" navbar>
<NavItem>
<Link href="/signup">
<NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
</Link>
</NavItem>
<NavItem>
<Link href="/signin">
<NavLink style={{ cursor: "pointer" }}>Signin</NavLink>
</Link>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
};
export default Header;
please give me your valuable suggestion.
The easiest solution may be to wrap your NavLink with a native html element. In your case:
<Link href="/signup" passHref>
<a>
<NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
</a>
</Link>
From the official documentation: if-the-child-is-a-function-component shows the right way when you wrap a custom function component within Link.
Add passHref attribute in Link.
Wrap your custom function component with React.forwardRef.
However, the NavbarBrand is not a component which you can manipulate. You can create a custom component to wrap NavbarBrand. It probably like
const CustomNavbarBrand = React.forwardRef(({ onClick, href }, ref) => {
return (
<NavbarBrand href={href} onClick={onClick} ref={ref}>
Click Me
</NavbarBrand>
)
})
<Link href="/" passHref>
<CustomNavbarBrand>{APP_NAME}</CustomNavbarBrand>
</Link>
Check the valid property which can be passed to NavbarBrand since I haven't use the reactstrap before.
This worked for me:
<Link href="/">
<div className="navbar-brand">
<a>{APP_NAME}</a>
</div>
</Link>
Instead of using the NavbarBrand component I just added the class navbar-brand
Solution :
Wrapp with anchor tag (a tag)
use passHref attribute
<Link href='/' passHref>
<a>
<Image src='logo.png' width="50px" height="50px" />
</a>
</Link>
Wrapping the child component in an a (anchor) tag resolved my issue.
Steps to reproduce :
Wrap around a component with the Link tag from Next JS
import Link from 'next/link'
import Image from 'next/image'
<Link href="/">
<Image width="100%"
height="100%"
src="/logo.png"
alt="Blitztech Electronics Logo" />
<Link>
Solution :
passing the 'important' passHref attribute
Wrapping the entire children in a a tag
There is a better way to solve this issue: whenever you are going to add a child tag under Link tag, such as an Image tag, just wrap them under a div or a tag. Here is the example:
<Link href="/">
<div>
<Image
src={Logo}
alt={TagName.COMPANY_NAME}
width={80}
height={80}
onClick={handleClicked}
/>
</div>
</Link>
Just Wrap it in anchor tag. it will work fine.
<Link href="/">
<a>{APP_NAME}</a>
</Link>
I'm creating with reactjs Navbar which should include an dropdown menu component. I took the example from react bootstrap.
import React from 'react';
import {NavDropdown} from 'react-bootstrap'
export default function Dropdown() {
return (
<>
<div className="dropdown-style">
<NavDropdown title="Dropdown" id="collasible-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</div>
</>
)
}
But when I run this code the dropdown menu does not open in the front.
But the dev-mode shows me that it's actually opening.
The dropdown menu is only showing when I'm including this css-style
.dropdown-style{
position: absolute;
But when I shrink the window then this component tears up the whole navbar when I merge it to the burger menu
I tried
{ .z-index: 999 }
But this didn't work.
Here is the navigation component
export default class Navbar extends Component {
state = {
isOpen: false
};
handleToggle = () => {
this.setState({ isOpen: !this.state.isOpen });
};
render() {
return (
<nav className="navbar">
<div className="nac-center">
<div className="nav-header">
<Link to="/">
<img src={logo} alt="foo" id="foo" />
</Link>
<button
type="button"
className="nav-btn"
onClick={this.handleToggle}
>
<FaAlignRight className="nav-icon" />
</button>
</div>
<div className="ul-width nav-font">
<ul
className={this.state.isOpen ? "nav-links show-nav" : "nav-links nav-terms"}
>
<li className="navbar-top">
<Link to="/support"
onClick={(this.state.isOpen) ? this.handleToggle : null}>
Support
</Link>
</li>
<li className="navbar-top">
<Link to="/aboutus"
onClick={(this.state.isOpen) ? this.handleToggle : null}>
<nobr>About Us</nobr>
</Link>
</li>
<li className="navbar-top">
<Link to="/foo"
onClick={(this.state.isOpen) ? this.handleToggle : null}>
foo
</Link>
</li>
<li className="navbar-top">
<Dropdown/>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
I've found out for myself now.
If one of you have the same problem, just overwrite the css-class with .dropdown-menu { position:relative !important }
it seems that dropdown-menu is written by react itself and you just have to overwrite it.
I have used react Bootstrap navbar also used react-scroll for smooth navigation. It's working fine but navbar is not collapsing when clicking any nav item in the responsive mode.
Packages
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { Link } from "react-scroll";
import { LinkContainer } from "react-router-bootstrap";
import { Navbar, Container, NavDropdown, Nav, Dropdown } from "react-bootstrap";
Navbar
<Navbar
sticky="top"
id="navbar"
bg="light"
expand="lg"
className="navbar navbar-expand-lg navbar-light bg-light"
collapseOnSelect={true}
>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
onClick={this.closeNavbar}
>
Features
</Link>
<Link
activeClass="active"
to="about"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
About
</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
Had the same issue. I found that "collapseOnSelect" works if we add "eventKey" for Nav.Link item
Example:
import { Link } from 'react-router-dom';
import { Nav, Navbar} from 'react-bootstrap';
<Navbar collapseOnSelect expand="lg">
<Navbar.Toggle />
<Navbar.Collapse>
<Nav className="mr-auto d-block">
<Nav.Item>
<Nav.Link eventKey="1" as={Link} to="/Home">
Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="2" as={Link} to="/Contant">
Page Contant
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
I had the same issue and resolved it by putting Bootstrap's Nav.Link back in. Here's how it would work based on your code :
<Navbar sticky="top" id="navbar"className="navbar" collapseOnSelect bg="light expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link>
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
Features
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
it's know issue in React Bootstrap that when we clicked on menu item it will not hide the menu automatically, below mentioned code help you to achieve the same.
An easy workaround that doesn't require jQuery:
<DropdownButton title={buttonTitle} onSelect={() => null}>
or if you're still using ES5:
<DropdownButton title={buttonTitle} onSelect={function() {}}>
It doesn't seem to matter what the onSelect callback returns.
I had the same problem, found a fix.
It is must to add expand attribute to your Navbar Component.
<Navbar variant="dark" expand="lg">
just use eventKey="2" inside <Nav.link/> . It will works fine for react js .
I have a Dasboard component where I have React-router
<Link/> components that are linking to
http:<procjethos>/team
Inside <Team/> component I have a <Link/> components that should link to
http:<projecthost>/list/:listId
But instead, it inherits from previous link and I get
http<projecthost>/team/list/:listId
// Dashboard.jsx
render() {
const { shoppingLists, teams } = this.props;
return (
<Fragment>
<Toolbar isHomePage/>
<div className="wrapper">
<div className="dashboard">
<h2 className="dashboard__heading">
<TeamIcon />
Cohorts
</h2>
<ul className="dashboard__list">
{_map(teams, team => (
<li className="dashboard__list-item" key={team._id}>
<Link to={`team/${team._id}`}>
<CardItem name={team.name} />
</Link>
</li>
))}
</ul>
</div>
</div>
</Fragment>
);
// Team.jsx
<Fragment>
<Toolbar />
<div>
Cohort of id:
{id}
<ul>
{_map(lists, list => (
<li className="dashboard__list-item" key={list._id}>
<Link to={`list/${list._id}`} replace>
<CardItem name={list.name} />
</Link>
</li>
))}
</ul>
</div>
</Fragment>
How to achieve the desired behavior in React-Router 4 with nested LINKs?
Add a / before link path
<Link to={`/list/${list._id}`} replace>
<CardItem name={list.name} />
</Link>