# \`Object(...) is not a function\` for history.push('/') in Login.js

**URL:** <https://discourse.sst.dev/t/object-is-not-a-function-for-history-push-in-login-js/1741>\
**Category:** General\
**Created:** [April 10, 2020, 6:06pm UTC](https://discourse.sst.dev/t/object-is-not-a-function-for-history-push-in-login-js/1741 "2020-04-10T18:06:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![stcalica](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/stcalica/32/794_2.png) [@stcalica](https://discourse.sst.dev/u/stcalica)\
**Post date:** [April 10, 2020, 6:06pm UTC](https://discourse.sst.dev/t/object-is-not-a-function-for-history-push-in-login-js/1741/1 "2020-04-10T18:06:15Z")

</div>

I am at this part of the tutorial: [Create a Custom React Hook to Handle Form Fields](https://serverless-stack.com/chapters/create-a-custom-react-hook-to-handle-form-fields.html)

I am getting this error:

> react-dom.development.js:11102 Uncaught TypeError: Object(…) is not a function  
> at Login (Login.js:31)  
> at renderWithHooks (react-dom.development.js:14803)  
> at mountIndeterminateComponent (react-dom.development.js:17482)  
> at beginWork (react-dom.development.js:18596)  
> at HTMLUnknownElement.callCallback (react-dom.development.js:188)  
> at Object.invokeGuardedCallbackDev (react-dom.development.js:237)  
> at invokeGuardedCallback (react-dom.development.js:292)  
> at beginWork$1 (react-dom.development.js:23203)  
> at performUnitOfWork (react-dom.development.js:22154)  
> at workLoopSync (react-dom.development.js:22130)

This is my Login.js component:

> ```
> import React, { useState } from "react";
> import { Auth } from "aws-amplify";
> import { useHistory } from "react-router-dom";
> import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
> import LoaderButton from "../components/LoaderButton";
> import { useFormFields } from "../libs/hooksLib";
> import { onError } from "../libs/errorLib";
> import "../css/index.css";
> 
> ```

```
export default function Login() {
  const history = useHistory();
  const { userHasAuthenticated } = useAppContext();
  const [isLoading, setIsLoading] = useState(false);
  const [fields, handleFieldChange] = useFormFields({
email: "",
password: ""
  });

  function validateForm() {
return fields.email.length > 0 && fields.password.length > 0;
  }

  async function handleSubmit(event) {
event.preventDefault();

setIsLoading(true);

try {
  await Auth.signIn(fields.email, fields.password);
  userHasAuthenticated(true);
  //history.push("/");
} catch (e) {
  onError(e);
  setIsLoading(false);
}
  }

  return (
<div className="Login">
  <form onSubmit={handleSubmit}>
    <FormGroup controlId="email" bsSize="large">
      <ControlLabel>Email</ControlLabel>
      <FormControl
        autoFocus
        type="email"
        value={fields.email}
        onChange={handleFieldChange}
      />
    </FormGroup>
    <FormGroup controlId="password" bsSize="large">
      <ControlLabel>Password</ControlLabel>
      <FormControl
        type="password"
        value={fields.password}
        onChange={handleFieldChange}
      />
    </FormGroup>
    <LoaderButton
      block
      type="submit"
      bsSize="large"
      isLoading={isLoading}
      disabled={!validateForm()}
    >
      Login
    </LoaderButton>
  </form>
</div>
  );
}

```

I pretty much copy and pasted my Login js from the tutorial. I updated the locations for all my code (really just my css).

I am pretty lost why I am getting this error. seems to be the way the history hook is?

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [April 13, 2020, 8:13pm UTC](https://discourse.sst.dev/t/object-is-not-a-function-for-history-push-in-login-js/1741/2 "2020-04-13T20:13:20Z")

</div>

Oh what’s line 31 in your code?