restructure code

Author: kentcdodds

19-basic-forms.html

@@ -4,10 +4,11 @@
   <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
   <script type="text/babel">
-    function UsernameForm({onSubmitUsername}) {
+    function UsernameForm() {
       function handleSubmit(event) {
         event.preventDefault()
-        onSubmitUsername(event.target.elements.usernameInput.value)
+        const username = event.target.elements.usernameInput.value
+        alert(`You entered: ${username}`)
       }
 
       return (
@@ -21,11 +22,6 @@
       )
     }
 
-    function App() {
-      const onSubmitUsername = username => alert(`You entered: ${username}`)
-      return <UsernameForm onSubmitUsername={onSubmitUsername} />
-    }
-
-    ReactDOM.render(<App />, document.getElementById('root'))
+    ReactDOM.render(<UsernameForm />, document.getElementById('root'))
   </script>
 </body>

20-dynamic-forms.html

@@ -4,14 +4,15 @@
   <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
   <script type="text/babel">
-    function UsernameForm({onSubmitUsername}) {
+    function UsernameForm() {
       const [username, setUsername] = React.useState('')
       const isLowerCase = username === username.toLowerCase()
       const error = isLowerCase ? null : 'Username must be lower case'
 
       function handleSubmit(event) {
         event.preventDefault()
-        onSubmitUsername(event.target.elements.usernameInput.value)
+        const username = event.target.elements.usernameInput.value
+        alert(`You entered: ${username}`)
       }
 
       function handleChange(event) {
@@ -32,11 +33,6 @@
       )
     }
 
-    function App() {
-      const onSubmitUsername = username => alert(`You entered: ${username}`)
-      return <UsernameForm onSubmitUsername={onSubmitUsername} />
-    }
-
-    ReactDOM.render(<App />, document.getElementById('root'))
+    ReactDOM.render(<UsernameForm />, document.getElementById('root'))
   </script>
 </body>

21-controlled-forms.html

@@ -4,12 +4,12 @@
   <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
   <script type="text/babel">
-    function UsernameForm({onSubmitUsername}) {
+    function UsernameForm() {
       const [username, setUsername] = React.useState('')
 
       function handleSubmit(event) {
         event.preventDefault()
-        onSubmitUsername(username)
+        alert(`You entered: ${username}`)
       }
 
       function handleChange(event) {
@@ -32,11 +32,6 @@
       )
     }
 
-    function App() {
-      const onSubmitUsername = username => alert(`You entered: ${username}`)
-      return <UsernameForm onSubmitUsername={onSubmitUsername} />
-    }
-
-    ReactDOM.render(<App />, document.getElementById('root'))
+    ReactDOM.render(<UsernameForm />, document.getElementById('root'))
   </script>
 </body>

24-lifting-and-colocating.html

@@ -55,6 +55,7 @@
         </form>
       )
     }
+
     ReactDOM.render(<App />, document.getElementById('root'))
   </script>
 </body>

25-http.html

@@ -98,8 +98,6 @@
       )
     }
 
-    ReactDOM.render(<App />, document.getElementById('root'))
-
     function fetchPokemon(name) {
       const pokemonQuery = `
         query ($name: String) {
@@ -133,5 +131,7 @@
         .then(r => r.json())
         .then(response => response.data.pokemon)
     }
+
+    ReactDOM.render(<App />, document.getElementById('root'))
   </script>
 </body>