Create a Login Page

From @jayair on Mon Apr 10 2017 01:03:11 GMT+0000 (UTC)

Link to chapter -

Copied from original issue:

Is it safe to store password in state?

It is only there temporarily and I think it should be okay?

It would have been really nice if there was dependencies and imports are listed accordingly. It took 3 hours to figure out which exports goes where.

Hmm can you expand on that a little? Which imports did you have a hard time figuring out?

So I had a problem in this chapter…

import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";

ControlLabel is not supported anymore. I had to change it to FormLabel to make it work.
Remembering to change in the code too… I also added the render function:

import React, { useState } from "react";
import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap";
import "./Login.css";
import { render } from "@testing-library/react";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

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

  function handleSubmit(event) {

  render(); {
    return (
    <div className="Login">
      <form onSubmit={handleSubmit}>
        <FormGroup controlId="email" bsSize="large">
            onChange={e => setEmail(}
        <FormGroup controlId="password" bsSize="large">
            onChange={e => setPassword(}
        <Button block bsSize="large" disabled={!validateForm()} type="submit">

Can you post which version of react-bootstrap you are using in your package.json?

I am new to React so am probably making a silly error. I have completed the previous chapters without issue. However at the end of the Create a Login Page chapter, when I run npm start, I get the following error in the browser:

Failed to compile.

Error in ./~/@aws-sdk/credential-provider-cognito-identity/dist/cjs/fromCognitoIdentity.js
Module parse failed: /home/sidney/Documents/code/tuts/notes-app/notes-app-client/node_modules/@aws-sdk/credential-provider-cognito-identity/dist/cjs/fromCognitoIdentity.js Unexpected token (13:20)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (13:20)
 @ ./~/@aws-sdk/credential-provider-cognito-identity/dist/cjs/index.js 4:21-53

I checked that all of the values in config.js are correct, but the error persists. Is there something I am overlooking?

That’s strange. Can you remove your node_modules, run npm install and try again?

Thank you, that seemed to work.

1 Like