learn-co-curriculum / react-forms Goto Github PK

formData = { firstName: this.state.firstName, lastName: this.state.lastName }

should be either const or let?

handleFirstNameChange = event => {
this.setStaet({
firstName: event.target.value
})
}

handleLastNameChange = event => {
this.setStaet({
lastName: event.target.value
})
}

Code doesn't work. I added an import of my parent component to my index.js. I also tried debugging the code myself but in the end the code will not work as it is. I did not spend to much time debugging but didnt get it to work. The first error it throws is

TypeError: Cannot read property 'firstName' of undefined

To control the value of these inputs, we use a prop specific to that type of input:
For and <textarea>, we use value --- WHERE?
For and , we use checked -- IN WHAT CONTEXT?
For , we use selected -- WHO IS WE?

This was clearly written by someone who understands the materials but doesn't understand our current level of understanding. Please flesh this out.

In loginForm-test.js there is an issue in the following test:

    it('should call the `onSubmit` callback prop when the form is being submitted', () => {
      const wrapper = shallow(<LoginForm onSubmit={spy} />);
      wrapper.find('#test-username').simulate('change', { target: { value: 'johndoe' } });
      wrapper.find('#test-password').simulate('change', { target: { value: 'supersecret' } });
      wrapper.find('form').simulate('submit', { preventDefault: spy });
      expect(spy.calledOnce, 'The `onSubmit` prop is not being called exactly once').to.be.true;
    });

As per the spec of the test before it, event.preventDefault should be called whenever the form is submitted. However, in this case spy is passed in as both the event.preventDefault override and the onSubmit property. Causing it to be called twice and have the test fail

A workaround a student can use is to not prevent default on valid input. However that is not the intended spec as you can see from the implementation on the solution branch or the readme.md. replacing

expect(spy.calledOnce, 'The `onSubmit` prop is not being called exactly once').to.be.true;

with

expect(spy.calledTwice, 'The `onSubmit` prop is not being called exactly once').to.be.true;

solves this issue.

When submitting the first form, controlled form example, I get the above warning in the browser.
A key should be provided for list items. From React spec: "Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity"

Solution:
listOfSubmissions = () => {
return this.state.submittedData.map((data, idx)=>{
return

The instructions say that we can code along with the following instructions:

Make sure to run npm install && npm start to see the code in the browser.

However we cannot use "npm start" because in the package.json files there is no script for "start". This actually has been happening for the last few labs and code-alongs beginning with the Props section. All the package.json files do not have a script for "start".

This is a reading. It should not look for tests to be passed.

"Whenever our state\ changes, the component re-renders, rendering the input with the new updated value."

extra slash after 'state'

Need an apostrophe on the first word in this sentence:
"Its already being displayed after all."

Thank you.

Hi,

I was able to learn a lot from this lesson, but there were a few confusing things about the directions and code. Here are a couple suggestions to clarify it.

The directions for using the example code seem to imply that when you enter a new value into the input field, the input field will keep that new value when viewed in the browser. However, it reverts back to the the initial state that was set. To fix this, I used the example code from the 'React Forms' resource at the bottom of the lab and that seemed to get it working as described by the READme. Other people may have had better luck, but I think either the directions could be updated with screenshots to show what should happen in the browser (maybe I was misunderstanding what should happen) or the code may need to be updated to display correctly. Maybe a complete constructor function needs to be added?

The Bonus section refers to code in the ControlledInput component, but is from early in the lesson (before the lab clearly stated which code to put in the starter code files). It would be easier to read if that code was added to code to put in the starter code files so we could see how it all fits together more clearly.

Thank you!

Controlled forms can very useful for specific purposes - since we can set...

One of the reference files at the bottom of the page doesn't work (Video: Controlled vs Uncontrolled Components in React). The link itself works but there is an error playing the video.

In Bonus section,

If we give our inputs name attributes, we can accss them as event.target.name:

has "access" spelled incorrectly.

In multiple code snippets in the readme, setState is typo'd as setStaet. Should be easy to find with a find and replace. This is only in the example snippets, and never in the ones that are meant to be copy pasted into the code along.

"Whenever our state\ changes, the component re-renders,..."

what does backslack do?