Reactjs hooks cannot read property 'push' of undefined error

1
votes

I am new and developing simple dashboard in react js.

My App.js file is

<BrowserRouter>
        <div>
         <div>
            <Switch>
              <Route exact path="/" component={Login} />
              <PublicRoute path="/login" component={Login} />
              <PrivateRoute path="/dashboard" component={Home} />
              <PrivateRoute path="/home2" component={Home2} />
             </Switch>
          </div>
        </div>
</BrowserRouter>

There are map function in Home component which is call another component named Deposits.js for mapping array elements on card component.

Home.js file code part is:

<Grid container spacing={3}>
      {menuData.map((x) => (
              <Grid item xs={12} md={4} lg={3}>
                <Paper>
                      <Deposits site_informations={x} channelName_coverted 
                      {(x.ChannelName).replace("_"," ")} />
                </Paper>
</Grid>

In Deposits.js there is a button, I want to push another page with this button click actually.

<IconButton onClick={() => props.history.push({ pathname: "/home2", state: { number: site_info.channel } })}  >
  
          <TrendingUp />

</IconButton>

But when onClick, cannot read property 'push' of undefined error is coming. What should I do ?

1
javascriptreactjsreact-routerreact-hooksreact-router-dom

1 Answers

0
votes

Issue

The Deposits component isn't receiving a history prop to do a push from.

Solution

Assuming your PrivateRoute component passes the route props through to rendered components then you can pass history from Home to Deposits

<Deposits
  history={props.history}
  ...other props 
/>

Or you can just use the useHistory react hook from react-router-dom inside your Deposits component.

const history = useHistory();

...

<IconButton
  onClick={() => history.push({
    pathname: "/home2",
    state: { number: site_info.channel }
  })}
>
  <TrendingUp />
</IconButton>