learn-co-students / react-forms-lab-v-000

React Controlled Components Lab

Overview

In this lab, you'll write and use controlled components, and write validation for form components.

Controlled Components

Now that we know how to handle form elements in React and how to set up controlled components, it's time to put that knowledge to the test. This lab is fairly extensive, but you'll use many core React concepts here that will surface again and again. Time to get some practice in!

General notes for this lab:

• Most of the DOM is pre-written for you in these exercises. Please do not remove anything that is already in the file — most of it is necessary to ensure that the tests run correctly.

• When instructed to save a value in the state, it doesn't matter what key you use, as long as it's in there!

TwitterMessage

1. Open the components/TwitterMessage.js file.

2. This component takes one prop: maxChars which is a number — the maximum amount of characters a message can have. This prop is being passed in from the App component with the value 280.

3. You'll find an <input type="text"> in this component. Make this a controlled component by adding the attributes to the <input> element. Its value should be saved in the component's state and should update on every change to the input.

4. Show the remaining characters in the component. It doesn't matter how you render it, as long as the number is correct. No need to guard against input that is too long — you can let the counter reach negative values.

LoginForm

1. Open the components/LoginForm.js file.

2. This component takes one prop: handleLogin which is a function — this function is called when the form is being submitted. By default, this function currently just includes console.log. That will allow you to see if the form is functioning correctly when working in your browser.

3. You'll find two inputs in this component: <input type="text"> and <input type="password">. Make this a controlled component by adding the necessary attributes to these inputs. The input values should be saved to the component's state on every change.

4. An example of an input would look like:

   <input
     id="username"
     type="text"
     name="username"
     value={this.state.username}
     onChange={this.handleInputChange}
   />

5. Remember that you can retrieve the input name and value of an event.target from the JS event.

6. Add the necessary event handler to the <form> element in order to call the onSubmit callback prop.

7. The onSubmit callback prop should only be called if both fields are filled in (with any value).

Note: In the starter code are id attributes - these are used in the tests, so make sure to leave them as they are.

Resources

• React Forms

react-forms-lab-v-000's Issues

[mistake]

webpack error

getting errors due to webpack config

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"webpack": "4.28.3"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

/Users/$$$/$$$$/react-forms-lab-v-000/node_modules/webpack (version: 3.12.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

Enzyme Testing Issue | All Tests Failing

When running npm test on this lab, I received the following error for every single test.

Issue

Error:
      Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To
      configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
      before using any of Enzyme's top level APIs, where `Adapter` is the adapter
      corresponding to the library currently being tested. For example:

      import Adapter from 'enzyme-adapter-react-15';

      To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html

      at validateAdapter (node_modules/enzyme/build/validateAdapter.js:14:11)
      at getAdapter (node_modules/enzyme/build/Utils.js:76:36)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:117:44)
      at shallow (node_modules/enzyme/build/shallow.js:19:10)
      at Context.<anonymous> (test/PoemWriter-test.js:42:23)

Research

I went online and found that Enzyme was recently updated and now it is required that configure and Adapter be called: facebook/create-react-app#3206

Solution

I proceeded to adding the following to the test/TwitterMessaage-test.js file:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

I ran npm test again and the issue no longer appeared and tests ran successfully.