This course is archived!
While the concepts of this course are still largely applicable, it's built using an older version of Symfony (4) and React (16).
New Component to Hold our Form
Keep on Learning!
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
With a Subscription, click any sentence in the script to jump to that part of the video!
Login SubscribeInside RepLogs, this form logic is starting to get pretty big: we have a handler function and most of the markup comes from the form! And this is only going to get more complex when we finish the form stuff and add future things like validation.
So, to reduce complexity, I think it's time to take this form and put it into its own new component. Remember: our app starts with RepLogApp on top: it's our smart, good-looking, fun-loving, stateful component. Then, it renders a dumb, tries-its-best, presentation component that holds the markup. That setup is important, and in a small app, it may be all you need! But, if RepLogs gets too big or confusing, you can choose to break things down even more.
Creating RepLogCreator
Inside the RepLog directory, create a new file called, how about, RepLogCreator.js. This will be another dumb, presentation component. And so, it can be a function, like RepLogList. Copy its import statements, paste, and export default function RepLogCreator with the normal props arg. Get things working by returning a hardcoded div!
I'm going to be a form when I grow up!
| import React from 'react'; | |
| import PropTypes from 'prop-types'; | |
| export default function RepLogCreator(props) { | |
| return ( | |
| <div>I'm going to be a form when I grow up!</div> | |
| ); | |
| } |
Love it! Back in RepLogs, on top, import RepLogCreator from ./RepLogCreator. Then, down in render, above the form, use <RepLogCreator />.
| // ... lines 1 - 3 | |
| import RepLogCreator from './RepLogCreator'; | |
| // ... lines 5 - 16 | |
| export default function RepLogs(props) { | |
| // ... lines 18 - 33 | |
| return ( | |
| // ... lines 35 - 61 | |
| <RepLogCreator/> | |
| // ... lines 63 - 99 | |
| ); | |
| } | |
| // ... lines 102 - 110 |
Ok, let's go check it out! So far, so good.
Next, copy all of the form markup, delete it, go to RepLogCreator and... paste!
| // ... lines 1 - 3 | |
| export default function RepLogCreator(props) { | |
| return ( | |
| <form className="form-inline" onSubmit={handleFormSubmit}> | |
| // ... lines 7 - 39 | |
| </form> | |
| ); | |
| } |
That looks cool... but, come on. We know that nothing ever works on the first try. Try it - yep... we are rewarded with a nice big error!
handleFormSubmitis not defined
coming from RepLogCreator line 6: it's our onSubmit! I totally forgot about that! Go grab it from RepLogs - and, by the way - check out how small this component is looking - then, inside RepLogCreator, paste.
| // ... lines 1 - 4 | |
| function handleFormSubmit(event) { | |
| event.preventDefault(); | |
| console.log('I love when a good form submits!'); | |
| console.log(event.target.elements.namedItem('reps').value); | |
| onNewItemSubmit('Big Fat Cat', event.target.elements.namedItem('reps').value); | |
| } | |
| // ... lines 13 - 52 |
The last missing piece is the onNewItemSubmit() callback: this is passed from RepLogApp to RepLogs. And now, we need to pass it once again to RepLogCreator. Because we need a new prop, define it first at the bottom in propTypes: RepLogCreator.propTypes = an object and... go steal this code from RepLogs.
| // ... lines 1 - 54 | |
| RepLogCreator.propTypes = { | |
| onNewItemSubmit: PropTypes.func.isRequired, | |
| }; |
Excellent! Now that we are requiring this prop, head back up to render() and destructure it: const { onNewItemSubmit } = props.
| // ... lines 1 - 3 | |
| export default function RepLogCreator(props) { | |
| const { onNewItemSubmit } = props; | |
| // ... lines 6 - 52 | |
| } | |
| // ... lines 54 - 58 |
Cool! Finally, in RepLogs, nice! PhpStorm is already telling us that we're missing a required prop: pass this onNewItemSubmit={onNewItemSubmit}.
| // ... lines 1 - 24 | |
| return ( | |
| // ... lines 26 - 52 | |
| <RepLogCreator | |
| onNewItemSubmit={onNewItemSubmit} | |
| /> | |
| // ... line 56 | |
| ); | |
| // ... lines 58 - 67 |
And... we're done! Probably... Let's go find out: refresh. The form renders... we can select something and... it does print. Awesome!
Introducing: Refs
And now.... it's time to start bending some of the nice rules that we've been talking about. RepLogCreator is a "dumb" component. It's like a template: its main job is to render markup, not to contain state or a lot of logic. Because "dumb", presentation components only really render things, we usually create them as functions instead of a class... just because we can and we're lazy!
Well... that's a good rule, but it's not always true. Right now, our handler function uses the name attribute of the input element to get a reference to the underlying DOM element. Then, it reads its value. It turns out that React has its own system for allowing you to reference the corresponding DOM element for any of our React elements. It's called "refs".
Refactoring our Dumb Component to a Class
There are a few ways to use this "refs" system. But, the recommended way requires your component to be a class. And, that's ok! There are some legitimate situations where a dumb component needs a class. Refs are one of those.
No big deal: let's change this to a class! First, we need to also import Component from React. Then, export default class RepLogCreator extends Component. And, of course, we now need to put all of this inside a render() function. Let's indent everything one level, and close the function.
| import React, { Component } from 'react'; | |
| // ... lines 2 - 3 | |
| export default class RepLogCreator extends Component { | |
| render() { | |
| const { onNewItemSubmit } = props; | |
| // ... line 7 | |
| function handleFormSubmit(event) { | |
| // ... lines 9 - 14 | |
| } | |
| // ... line 16 | |
| return ( | |
| <form className="form-inline" onSubmit={handleFormSubmit}> | |
| // ... lines 19 - 51 | |
| </form> | |
| ); | |
| } | |
| } | |
| // ... lines 56 - 60 |
Yep! Webpack is happy! Now that we have a proper class, we don't need to put handleFormSubmit() inside of render() anymore. Nope, we can access the props from anywhere as this.props.
So, copy that function & the const, paste it in the class, turn it into a property, and move the const into the function. Oh, and try not to mess up the syntax like I just did.
| // ... lines 1 - 5 | |
| handleFormSubmit(event) { | |
| event.preventDefault(); | |
| const { onNewItemSubmit } = this.props; | |
| console.log('I love when a good form submits!'); | |
| console.log(event.target.elements.namedItem('reps').value); | |
| onNewItemSubmit('Big Fat Cat', event.target.elements.namedItem('reps').value); | |
| } | |
| // ... lines 15 - 60 |
Better! Back in render(), now we'll call this.handleFormSubmit.
| // ... lines 1 - 15 | |
| render() { | |
| return ( | |
| <form className="form-inline" onSubmit={this.handleFormSubmit}> | |
| // ... lines 19 - 52 | |
| ); | |
| } | |
| // ... lines 55 - 60 |
Let's go check it out! Head back to the browser refresh! It loads... and when you submit... error! Woh! And then the page reloaded! Oh no!
There are two evil problems working together against us! For the first, my bad! We need to make sure that event.preventDefault() is always the first line in a handle function. You'll see why when we refresh and try the form again.
Ah yes: here is the real error:
Cannot read property props of undefined
coming from line 7. We know this problem: we forgot to bind our handler function to this... so this is not our RepLogCreator instance. When the page refreshed, it was because this error killed our code even before we called event.preventDefault().
We know the fix: whenever you have a handler function that's a property on your class, we need to create a constructor, call super(props), then bind that function with this.handleFormSubmit = this.handleFormSubmit.bind(this).
| // ... lines 1 - 4 | |
| constructor(props) { | |
| super(props); | |
| this.handleFormSubmit = this.handleFormSubmit.bind(this); | |
| } | |
| // ... lines 10 - 65 |
That should do it! Move back, refresh, fill in the form and... yes! Our app logs correctly again. It's time to use refs to finish our form logic so we can update the repLogs state.
Hello, thank you for the work done, it's very intuitive :).
But why is the component name "repLogCreator" and not "repLogForm"?
I am a bit confused with these names... maybe because I have a twig backroud :D :D