Refactor React Components with Prop Spreading and Destructuring
Sometimes, making your code more succinct can make the code more readable. Readable code is easier to grok for other developers and when everybody understands the code, it's easier to maintain and share the burden on a team. In this lesson, we'll refactor our code to make the JSX less verbose using object spread and destructuring.
Instructor: [0:00] Let's do a little refactoring to clean up our component code. We have a lot of references to props. to get access to our props. Instead, let's replace this props object with a destructured object so we can grab the individual identifiers.
[0:13] I'm going to delete props. I'm just going to use curly braces here. We're grepping the ID, the term, and the definition that are passed in for the card. We also have this onRemove prop. I'll add that.
[0:27] I'm going to come down into the code. We're going to find the first incidence of props., select it. Then I'm going to command-D in VS Code to select all occurrences of that. From there, I'm just going to hit backspace. I'll save that. That'll clean up that code a bit.
[0:45] I'm going to come over to cardForm. I'm going to do the same thing. We'll destructure this and just grab onSave by itself. Down here, we can remove these three props. pieces and shorten that line up.
[1:02] With that done, let's go to app.js. Here, I want to look at our cardPreview. We've destructured the fields from our card in this map. Then we're passing them in independently. If we move onRemove down and we look, we have ID, term, and definition. They're receiving ID, term, and definition as their values.
[1:27] When we destructure an object like this and then pass it back in as its individual parts, there's a simpler way. I'm going to come up here. I'm going to take this destructured reference to the card object out. I'm just going to replace that with card. I'm going to update key to use card.ID because we still need to grab the ID reference here.
[1:46] I'm going to remove ID, term, and definition. Instead, I'm going to spread in the card object as props. This is effectively going to pass in an ID prop, a term prop, and a definition prop using the values from the card. I'm going to save this. That cleans this code up quite a bit.
[2:07] With those refactors done, I'm just going to open this up, run it in a browser with yarn start. It loaded up, got the API data. It's showing the cards. Our state still works on each individual card. We can maintain state in the form. We can save, delete, and everything's working as expected.
[2:39] If we jump back over to our terminal, we can stop the server. We can just verify that our tests still pass. I'll run yarn test. Our tests are still passing.