Beginner's Guide to Managing Data in React

[00:00 - 00:21] Lesson 7 - React Car Concepts In this final lesson in Module 2, we're going to briefly introduce a car concept that lives right at the heart of React, and that's how to pass data around between different components. I meet a lot of students who are both new to code in or new to react, and one of the common sticking points is how to deal with data, passing it to other components and getting other data back into the original parent component.

[00:22 - 01:11] Because of the modular nature of React development, you'll generally be focused on creating small, isolated parts of functionality within your apps. You'll then build larger features or areas within the app by combining these modules or components together. Even if one component is not a logical parent of another, that component may reference another in order to build some area of functionality. The component doing the referencing can be thought of as the parent component, whilst the component being referenced can be thought of as the child component. As an example, a header is not naturally related to a shopping basket, but an e-commerce website might have a count of the current items in the shopping basket in the header somewhere. Therefore, we can say that the header component would be the parent component, and the shopping basket would be the child. Of course, parents can have parents themselves and children can have children. The important thing to remember is this initial relationship as it dictates how data flows within a React app.

[01:12 - 01:42] Without getting lost in complex topics such as Redux, which we'll be covering in a later module, data generally flows in two directions within React, down via props, or up via events and event handlers. Looking at this visually, you can see that a parent component can pass data downwards to its child components via props. Similarly, child components can feed data back up to parents via event handlers, which would usually be functions passed down to them via props. Let's have a look at this quick example to illustrate data handling in action.

[01:43 - 02:07] In this simple example, we have two components, parent component and child component. In parent component, we have an array of strings that is set into state using the use state hook and assigned into the item's variable. We then have a clear basket function that sets the value of our items array to an empty array. Parent component then returns an instance of the child component component, passing both items and clear basket into it as props.

[02:08 - 02:59] In child component, we return a paragraph that tells the user how many items are in their shopping basket by checking the length of the item's array it received via the props object from parent component, although in child component, this is received as a basket. Now, if we want to clear the basket, we can't do this in child component, so we need a means to tell parent component that we want to empty our basket. The way we pass this request up to trigger the clearing of a basket is with a function passed to child component via props . In our case, that function is clear basket and we're passing it into child component via props under the name click handler. In child component, we attach the passed in click handler function to the on click event of our button element. So now, when the user clicks the button, the on click event is triggered, which calls the click handler function from props. The click handler function, which is really clear basket, is invoked in parent component and the basket is cleared.

[03:00 - 03:34] Fortunately for us, React takes care of the sinking of the dynamic data passed between components via props on our behalf, re-rendering the UI is needed. In our case, when the user clicks the button in child component, a function in parent component is triggered, which clears the items array. The new items array, which is empty, is then passed down into child component again, which re-renders the output. This time, displaying the new message, you have zero items in your basket. React handles this automatically, which is pretty neat and one of the most powerful features of the React library.