Menu
I'm trying to redirect to a page using an onClick event of a component. As I have react gatsby installation is it possible to use Link from gatsby-link to redirect.
import React from 'react';
import { OverflowMenu, OverflowMenuItem } from '../Overflow';
import Link from 'gatsby-theme-carbon/src/components/Link';
class OverflowComponent extends React.Component {
editPage(index) {
console.log();
// window.location.href='/edit';
return(
<Link to="/edit"></Link> // I'm trying to redirect to Edit page
)
}
deletePage() {
console.log("Delete clicked");
}
render(){
return (
<div>
<OverflowMenu flipped={true}>
<OverflowMenuItem itemText="Edit" primaryFocus onClick={() => this.editPage()} />
<OverflowMenuItem itemText="Delete" onClick={() => this.deletePaget()} />
</OverflowMenu>
</div>
);
}
}
export default OverflowComponent;
from the above code the Overflow component is a contributed component and it can have a onClick function. And I'm trying to redirect using gatsby-link.
803
The React onClick event handler enables you to call a function and trigger an action when a user clicks an element, such as a button, in your app. Event names are written in camelCase, so the onclick event is written as onClick in a React app. In addition, React event handlers appear inside curly braces.
Gatsby is built to behave almost exactly like a normal React application. React powers components in Gatsby sites that are rehydrated, whatever you can do in React you can do with Gatsby. Your components can pull in whatever data they need from any source in the data layer.
To set your mind at ease, the onClick event does work with divs in react, so double-check your code syntax.
Example: Pass a Button Value to an Inline Function Notice the value e that's returned from the onClick event handler: import React from 'react'; function App() { return ( <button value="hello!" onClick={e => alert(e. target. value)}> Click me!
The method redirectPages must have 3 arguments - config, createPage, redirectPageTemplate. config is an array of objects. Every object contains the URL that triggers the redirection and the new page. createPage is Gatsby action we are reusing. redirectPageTemplate is the template with the Meta tag we created.
Handling events in React is simple; events are declared in camelCase in a React app. For instance, if you have to define the onclick event, so we take a little different approach and declare onClick event this way in a React application.
Step 1: Create a basic react app using the following command in your terminal. Project Structure: After creating the basic react app, the folder structure looks like this, Step 2: Make different pages for routing. Here, We are going to create different components for our react-app. So that we route over them for demonstration.
Step 1: Create a basic react app using the following command in your terminal. Project Structure: After creating the basic react app, the folder structure looks like this, Step 2: Make different pages for routing. Here, We are going to create different components for our react-app.
Instead of using Link or window.location as mentioned in the question we can use navigate from gatsby. As shown below
import React from 'react';
import { OverflowMenu, OverflowMenuItem } from '../Overflow';
import {navigate} from 'gatsby'; //import navigate from gatsby
class OverflowComponent extends React.Component {
editPage(index) {
navigate('/edit'); //navigate to edit page
}
deletePage() {
console.log("Delete clicked");
}
render(){
return (
<div>
<OverflowMenu flipped={true}>
<OverflowMenuItem itemText="Edit" primaryFocus onClick={() => this.editPage()} />
<OverflowMenuItem itemText="Delete" onClick={() => this.deletePaget()} />
</OverflowMenu>
</div>
);
}
}
export default OverflowComponent;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With