{"action":"opened","issue":{"url":"https://api.github.com/repos/freeCodeCamp/freeCodeCamp/issues/15690","repository_url":"https://api.github.com/repos/freeCodeCamp/freeCodeCamp","labels_url":"https://api.github.com/repos/freeCodeCamp/freeCodeCamp/issues/15690/labels{/name}","comments_url":"https://api.github.com/repos/freeCodeCamp/freeCodeCamp/issues/15690/comments","events_url":"https://api.github.com/repos/freeCodeCamp/freeCodeCamp/issues/15690/events","html_url":"https://github.com/freeCodeCamp/freeCodeCamp/issues/15690","id":246146949,"number":15690,"title":"Create a Controlled Form challenge does not actually create a form","user":{"login":"AryanJ-NYC","id":8263430,"avatar_url":"https://avatars3.githubusercontent.com/u/8263430?v=4","gravatar_id":"","url":"https://api.github.com/users/AryanJ-NYC","html_url":"https://github.com/AryanJ-NYC","followers_url":"https://api.github.com/users/AryanJ-NYC/followers","following_url":"https://api.github.com/users/AryanJ-NYC/following{/other_user}","gists_url":"https://api.github.com/users/AryanJ-NYC/gists{/gist_id}","starred_url":"https://api.github.com/users/AryanJ-NYC/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AryanJ-NYC/subscriptions","organizations_url":"https://api.github.com/users/AryanJ-NYC/orgs","repos_url":"https://api.github.com/users/AryanJ-NYC/repos","events_url":"https://api.github.com/users/AryanJ-NYC/events{/privacy}","received_events_url":"https://api.github.com/users/AryanJ-NYC/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-07-27T19:38:28Z","updated_at":"2017-07-27T19:38:28Z","closed_at":null,"body":"#### Challenge Name\r\nhttp://hysterical-amusement.surge.sh/\r\n\r\nReact 30: Create a Controlled Form\r\n\r\n#### Issue Description\r\nThe instructions for the challenge is as follows:\r\n\r\n> The MyForm component is set up to handle changes on an input element. Add the input element in the return of the MyForm component, setting its value and onChange() attributes like the last challenge. Then, create a button with the text \"Submit\" to submit the input value. (The form won't submit anywhere, this is a simulation). The button should have an onClick() handler which triggers a method called handleSubmit(). This method should take the value that's currently in the input and set it to the submit property in local state. \r\n\r\n> Finally, create an h1 tag below the button which renders the submit value from the component's state. You can type in the form and click the button, and you should see your input rendered to the page.\r\n\r\nI believe this challenge will teach students bad practice. In this form, the input element does not respond to the user pressing 'Enter' to submit the form.\r\n\r\nI propose the solution require students to use a `<form>` tag with an `onSubmit` prop that is set to the `handleSubmit` function.  This is what is used in the [official React documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).\r\n\r\n#### Current Challenge Solution\r\n\r\n```jsx\r\nclass MyForm extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\tinput: '',\r\n\t\t\tsubmit: ''\r\n\t\t};\r\n\t}\r\n\thandleChange = (event) => {\r\n\t\tthis.setState({\r\n\t\t\tinput: event.target.value\r\n\t\t});\r\n\t}\r\n\thandleSubmit = () => {\r\n\t\tthis.setState({\r\n\t\t\tsubmit: this.state.input\r\n\t\t});\r\n\t}\r\n\trender() {\r\n  \treturn (\r\n\t    <div>\r\n        <input\r\n        \tvalue={this.state.input}\r\n        \tonChange={this.handleChange} />\r\n        <button onClick={this.handleSubmit}>Submit!</button>\r\n        <h1>{this.state.submit}</h1>\r\n\t    </div>\r\n    );\r\n  }\r\n};\r\n```\r\n#### Proposed Challenge Solution\r\n```jsx\r\nclass MyForm extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\tinput: '',\r\n\t\t\tsubmit: ''\r\n\t\t};\r\n\t}\r\n\thandleChange = (event) => {\r\n\t\tthis.setState({\r\n\t\t\tinput: event.target.value\r\n\t\t});\r\n\t}\r\n\thandleSubmit = () => {\r\n\t\tthis.setState({\r\n\t\t\tsubmit: this.state.input\r\n\t\t});\r\n\t}\r\n\trender() {\r\n  \treturn (\r\n\t    <form onSubmit={this.handleSubmit}>\r\n        <input\r\n        \tvalue={this.state.input}\r\n        \tonChange={this.handleChange} />\r\n        <button>Submit!</button>\r\n        <h1>{this.state.submit}</h1>\r\n\t    </form>\r\n    );\r\n  }\r\n};\r\n```"}}
{"actor":{"display_login":"AryanJ-NYC"}}