Develop Reference

Menu does not collapse when you click on one of the menu items on Mobile Devices

Hi All i need some help :)
I working on a Gatsby, React portfolio where i have a problem with The Menu It does not collapse when you click on one of the menu items on Mobile Devices.
The menu is working fine on desktop.
The menu works fine on all devices until I installed the react-scroll package and set it up.
I have tried to search on Google for help and i found some simlare issues but i still dont know to fix the problem. :)
Hope you can help.
There is to Nav components i my project:
This my Project on SandBox:
NavBar.js
https://codesandbox.io/s/gatsby-starter-and-portfolio-jr9tn?file=/src/components/Navbar/Navbar.js
NavbarLinks:
https://codesandbox.io/s/gatsby-starter-and-portfolio-jr9tn?file=/src/components/Navbar/NavbarLinks.js

Here you have your CodeSandbox fixed: https://codesandbox.io/s/gatsby-starter-and-portfolio-forked-43thz?file=/src/components/Navbar/NavbarLinks.js
What was happening is that, since you've installed react-scroll, the state was never updated when an item was selected so, React's rehydration was never occurring and your menu was never closed. The code is a bit redundant however I've managed to get it to work. What I've added is a simple function passed via props that toggle the menu.
In your NavBar.js, instead of:
<Toggle
navbarOpen={navbarOpen}
onClick={() => setNavbarOpen(!navbarOpen)}
>
If added a function, since it's not a good practice to trigger effects directly bonded in the components. I've changed it to:
<Toggle navbarOpen={navbarOpen} onClick={toggleMenu}>
That toggleMenu function, is a simply function that does the same than your previous one:
const toggleMenu = () => setNavbarOpen(!navbarOpen)
Now, you have isolated that piece of functionality and you can reuse it, passing it to your child component (NavbarLinks):
{navbarOpen ? (
<Navbox>
<NavbarLinks toggleMenu={toggleMenu} />
</Navbox>
) : (
<Navbox open>
<NavbarLinks toggleMenu={toggleMenu} />
</Navbox>
)}
Note: this code is redundant, should be refactored to avoid that kind of unnecessary repetition. For example, something like this is much better:
<Navbox open={navbarOpen}>
<NavbarLinks toggleMenu={toggleMenu} />
</Navbox>
As you can see, you <NavbarLinks> have the functionality to toggle the menu in toggleMenu function so there you can trigger the function in every click (onClick):
const NavbarLinks = ({ toggleMenu })=> {
return (
<>
<NavItem
activeClass="active"
to="section1"
spy={true}
smooth={true}
duration={1000}
onClick={toggleMenu}
>
About
</NavItem>
<NavItem
activeClass="active"
to="section2"
spy={true}
smooth={true}
duration={1000}
onClick={toggleMenu}
>
Test
</NavItem>
<NavItem
activeClass="active"
to="section3"
spy={true}
smooth={true}
duration={1000}
onClick={toggleMenu)}
>
Gallery
</NavItem>
<NavItem to="/page-2">Contact</NavItem>
</>
)
}
Since you are destructuring props, you have the toggleMenu function available directly.

Making a react component clickable

I have a functional REACT component, code is as follows
const MobileListing = (props) => {
function handleClick() {
console.log('in cardClick');
}
return (
<div>
<Row>
<Card onClick={() => handleClick()} style={{cursor : 'pointer'}} >
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Row>
</div>
);
}
export default MobileListing;
I want to make the entire card clickable. I read through a post on stack overflow Making whole card clickable in Reactstrap which talks about using an anchor tag, but that doesn't work for me.
Can someone help me understand what I am doing wrong?
A card looks like this on my site and I want to make the whole card clickable.

You can use the onClick either on the top-level div element for this, or, in case there would be more cards inside the Row you can wrap each with a div and give it the onClick, property.
such like:
<div>
<Row>
<div onClick={handleClick}>
<Card style={{ width: '18rem', cursor : 'pointer' }} >
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</div>
</Row>
</div>

It is better to wrap it around with an anchor tag because clickable things should be links if they go to places, and should be buttons if they do things.
Using click handlers with other things just make things inaccessible.

React Router Link to New Tab

I am attempting to render a new component in a new tab using React Router. It has one parameter that is being passed.
Below is an example of what works for me in the same tab with one parameter. If I add target="_blank" to the below link, I get a 404 error.
Routing in index.js:
<Route exact path="/a-graph/:anId" component={aGraph} />
Link in main menu page:
<Link to={"/a-graph/anId"} style={{ overflowX: "visible", color: "black" }}>
<MenuItem fitted key="graph" text="A Graph"/>
</Link>
What do I need to change so that I can open this component with a parameter in a new tab? Thanks!
Edit: my URL is displayed as /a-graph/anId which is a number. If my route and link are correct, I don't see how I'd get a 404. Thanks for looking!

<Link target="_blank" to={"/a-graph/anId"} style={{ overflowX: "visible", color: "black" }}>
<MenuItem fitted key="graph" text="A Graph"/>
</Link>
As found here: https://github.com/ReactTraining/react-router/issues/2188#issuecomment-146366561
In 1.0 this is supported. We just pass all extra props you give your <Link>through to the <a> element. So, <Link ... target="_blank"> will work as you'd expect.

Routing to specific part of other component in React

I have a problem with routing to a specific part of another functional component in React.
I have declared Route in Main component and Link around the place where I want to redirect from... it looks like this...
The main function gets:
<Switch>
<Route exact path='/news/:eyof' component={News} />
<Route exact path='/news/:svetsko' component={News} />
<Route exact path='/news' component={News} />
</Switch>
And I defined in other functional component:
<div className="card">
<Link to="/news/:svetsko">
<div className="card-header">
<h3>Artistic gymnastics world championship</h3>
</div>
</Link>
</div>
So by clicking on this link, I need to get redirected to News page class "svetsko" so I can read about that news... All news are in containers in same page....

Try something like this in your component:
let { scrollToSection } = useParams();
svetskoRef = React.createRef();
useParams() allows you to access :svetsko. When the component loads, you can use scrollToSection to navigate between different parts of the page. The scrollRef is used to access the DOM element you want to scroll to.
window.scrollTo(0,scrollRef.offsetTop)
The markup would look something like this:
<div className="card" ref="svetskoRef">
<Link to="/news/:svetsko">
<div className="card-header">
<h3>Artistic gymnastics world championship</h3>
</div>
</Link>
</div>

You need only one route like
<Switch>
<Route exact path='/news' component={News} />
</Switch>
you can give link like
<Link to={{
pathname: '/news',
state: { news : yourNewsName } // you can pass svetsko here
}}>
<div className="card-header">
<h3>Artistic gymnastics world championship</h3>
</div>
</Link>
You can access this state in your News Page like
<div>{ props.location.state !== undefined ? props.location.state.news : '' }</div>
After getting your news type like eyof :
Step 1 :
you can create on functional component which takes argument as your
data and return your new post jsx with your data.
Step2 :
So,when you get your eyof in your page then you are going to call
this function and pass your data related to your eyof and that function
return your new post to your page.

Ok, I found one really good library as a solution, it's called react-scroll and it has an option to wrap link you need in earlier defined scroll link, and to wrap component you want it to link as a specific part of the page with Element with id you gave to scroll link as a parameter... Try it if you need it somehow.

How to add link my react card component to another page?

I've created a card component as a react component and I'm trying to link it to another page. Should I link it inside the card.js component or inside my index.js?
When users click on each card it should link to another page.
<div className="CardGroup">
<Card
title="JCDECAUX Festive Card"
text="Illustration"
image={require('../images/christmas-card-1.jpg')} />
<Card
title="Go Wild"
text="Motion Design"
image={require('../images/Go-wild-thumbnail.png')} />
<Card
title="Phase"
text="UI design"
image={require('../images/Phase-hackthon-image.png')} />
<Card
title="Shine"
text="UI design"
image={require('../images/shine-app.jpg')} />
</div>

In my opinion, you should handle it in card.js so please use it with props.