In the previous lesson, we've defined a JavaScript puppies array, which allows us to iterate through these beautiful puppies. But we've defined that puppies array directly in the PuppiesList component. And I'm pretty sure that other elements, like the ShortList here, is going to need the puppies array as well. So we need to move that somewhere else. I'm in the PuppiesList and once again,

So we need to move that somewhere else. I'm in the puppies list and once again, we could export the puppies already here and import it from that file, but it's sort of with. So what I want to do is grab all of it with the export and we're going to create a dedicated file. So not in components, but maybe here we'll have a data folder and inside here have puppies.php. Yes. And so we can export our puppies array from there,

and inside here have puppies do. Yes. And so we can export our puppies array from there, which means that I need to now go and import this. I think I can auto import it from data/puppies just like that. And we should be still in business and we are. But now what I wanna do, instead of importing the data directly in the puppies list, since multiple other components might need it, is I want to set up some sort of data flow in my app.

since multiple other components might need it, is I want to set up some sort of data flow in my app. So I want to import the puppies at the top of the app and then pass them down through the application. So I will delete the import here so it's temporarily broken. Once again, the UI is not happy at all. But what I'll do now is go in app.jsx. Remember, this is our main app, and I don't think the page wrapper, container, or header will ever need the puppies list,

and I don't think the page wrapper, container, or header will ever need the puppies list, but our main component here is a pretty good candidate to be the entry point for that data. So at the top, I will import the puppies from the data file. So we're still not doing proper data fetching here. This is coming later. We are just importing some data from our file system here. And so down in the main component, essentially I will pass down the puppies data

And so down in the main component, essentially I will pass down the puppies data to the components that need it. Now remember how earlier we had to set a key to a component, and this is how you set attributes or props to components. So we can also pass puppies. We are deciding that the PuppiesList component will receive a puppies prop, which is the array of puppies. The application is clearly still not happy. So we are passing puppies to the PuppiesList.

The application is clearly still not happy. So we are passing puppies to the puppiesList and then trying to consume the puppies. But as you can see, puppies is still not defined. Once again, it helps to think of your JSX component as a JavaScript function. So we are passing a puppies parameter to our puppiesList function here, but where the function is defined, it is not doing anything with it.

but where the function is defined, it is not doing anything with it. If you call it JavaScript function with parameters, but then that function definition doesn't do anything with these parameters, nothing's gonna happen. And so what we need to do here is receive the props passed inside the function. And so technically here I could go props.puppies and the UI would work once again without any console errors like we've seen earlier in our page wrapper,

and the UI would work once again without any console errors like we've seen earlier in our page wrapper, it's common practice to destructure the props that you pass, like here the children. And so here we could destructure the puppies like so. So now we are passing the puppies down to our PuppiesList component. That component receives the puppy's props and then is able to use it. Okay? And to drive that point home, we are going

and then is able to use it. Okay? And to drive that point home, we are going to make each individual puppyCard its own component. I'll start at the bottom here. So I want a function puppyCard. And this needs to return basically the whole list item here, like so and so back at the top. Instead of having the list item here, I'll delete that. I will instead have the puppyCard.

Instead of having the list item here, I'll delete that. I will instead have the PuppyCard. Again, your puppy is broken. We don't have a puppy and we don't have a key. So let's first pass the key here with puppy.id. And we are back in the same situation where the PuppyCard wants to use the puppy, but the puppy is not defined. And that's because we need to pass, once again, this time, just a puppy to the PuppyCard,

And that's because we need to pass, once again, this time, just a puppy to the puppy card, and we need to accept it here as a puppy prop. And so now the puppies gets passed down to the puppies list, the puppies list. In turn, pass one of the puppy to the puppy card where it gets received and everything, once again works. The props never change. You can think of them as immutable. So if you want to data to change in an application, as we'll see in the little bit, you need to use an event,

So if you want to data to change in an application, as we'll see in the little bit, you need to use an event, a callback function that changes the data at the top where it's passed down to components. And then each component will receive the new data through the new props. That may sound confusing at first, but it's actually a super simple mental model, which makes React application very predictable.

which makes React application very predictable.