Sorry if this is a dumb question but I'm trying to get my react chops up and build a simple site with a select dropdown which should route to a URL when selected. However I'm getting this error. Or if there's a better way to do this with hooks, I am all ears :). Thanks
×
TypeError: Cannot read properties of undefined (reading 'push')
DropDown.onChange
src/components/Dropdown.js:10
7 |
8 | class DropDown extends Component {
9 | onChange = (e) => {
> 10 | this.props.history.push(`/${e.target.value}`);
11 | }
12 |
13 | render() {
Below is my code
import React, { Component } from 'react'
import '../App.css'
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, withRouter } from "react-router-dom";
class DropDown extends Component {
onChange = (e) => {
this.props.history.push(`/${e.target.value}`);
}
render() {
return (
<div>
<label htmlFor="pests">Choose a pest:</label>
<select onChange={this.onChange}>
<option value="ants">Ants</option>
<option value="wasps">Wasps</option>
</select>
</div>
)
}
}
export default DropDown;
Here's my router code
function App() {
return (
<div className="main">
{/* <Navbar/> */}
<Header />
<NavbarBasic />
<Dropdown />
{/* These are the main routes and subpages */}
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/pests-we-treat' element={<Pests />} />
<Route path='/services' element={<Services />} />
<Route path='/contact' element={<Contact />} />
<Route path='/ants' element={<Ants />} />
<Route path='/wasps' element={<Wasps />} />
</Routes>
</div>
);
}
export default App;
Transform your class component in a functional componente and import useHistory like this :
import { useHistory } from "react-router-dom";
...
let history = useHistory();
history.push(`/${e.target.value}`);
import React, { Component } from 'react';
// import { BrowserRouter, Route, withRouter } from "react-router-dom";
class DropDown extends Component {
onChange = (e) => {
// this.props.history.push(`/${e.target.value}`);
window.location.href = `/${e.target.value}`;
}
render() {
return (
<div>
<label htmlFor="pests">Choose a pest:</label>
<select onChange={this.onChange}>
<option value="ants">Ants</option>
<option value="wasps">Wasps</option>
</select>
</div>
);
}
}
export default DropDown;
dropdownRouter.tsx
import { createBrowserHistory } from 'history';
export default function DropdownPush(path: string) {
let history = createBrowserHistory();
history.push(`/${path}`);
}
OR
import { useHistory } from 'react-router-dom';
export default function DropdownPush(path: string) {
const history = useHistory();
history.push(`/${path}`);
}
OR if you are using v6 react-router-dom useHistory() was replaced by useNavigate()
import { useNavigate } from "react-router-dom";
export default function DropdownPush(path: string) {
const navigate = useNavigate();
navigate(`/${path}`);
}
dropdown.tsx
import React, { Component } from 'react';
import DropdownPush from './dropdownRouter';
class DropDown extends Component {
constructor(props) {
super(props);
}
onChange = (e) => {
// this.props.history.push(`/${e.target.value}`);
// JS redirect method
// window.location.href = `/${e.target.value}`;
// Using Hook
DropdownPush(e.target.value);
};
render() {
return (
<div>
<label htmlFor="pests">Choose a pest: </label>
<select onChange={this.onChange}>
<option value="ants">Ants</option>
<option value="wasps">Wasps</option>
</select>
</div>
);
}
}
export default DropDown;
I expect you want to wrap your Dropdown component in the withRouter higher-order component. That would usually happen in the export:
import { withRouter } from "react-router";
class DropDown extends Component {
// ...
}
export default withRouter(Dropdown);
The alternative way to access history is to use the useHistory hook, and the docs contain a good example of how to use it.