Container/Presentation Pattern Solution

[00:00:00]
>> So the first thing or I just open a backup in StackList. So the first thing that we see here is that oldest data or the fetching data is now in our presentational component. So we don't want that, so we're just going to move this to our container listings component.

[00:00:16]
I just copied it, I'm just going to paste it. Now, in here, I already imported the listings component from the presentational listings that's exported here. So I can remove this and instead, I'm going to expect some props from here, because I'm going to get the listings from props instead of my own data, instead of my own state.

[00:00:37]
Now, it just shows up because I haven't passed it there yet. So in here, I have listings and all I'm gonna do is to return listings, the presentational components and then listings is data. Data listings sorta like that. Let me just get this real quick, There's a caching problem again.

[00:01:04]
Oops. Presentational. It'll just props them up. Listings. Okay, I'm just gonna refresh this real quick.
>> I think in app.js, you need to be pulling in listings from container instead of presentational component.
>> You are so right, okay, it's from the container, yeah, that was it, okay, that was my bad.

[00:01:39]
Okay, so now indeed, yeah, so because we had to render that upper level container component, which of course, wrapped that presentational component. It was complaining that it didn't have access to props because we were still rendering that presentational component. Yeah, so in here, we're now just fetching the data here and then rendering listings as a presentational component right there.

[00:01:59]
So that's a pretty useful way too, yeah, like I said before I have that separation of concerns. We just have one component just responsible for fetching data and the other for the presentational side. Questions?
>> Is it common to split the component files into container and presentational folders?

[00:02:19]
I've typically always kept similar files together, all the listing files and-
>> Yeah.
>> Components listings folder, for example, but I've never known what the preferred approach is.
>> I don't really think there's a preferred approach, I'm very used to splitting this up into container and presentational, but everyone has their own way of naming files, naming folders.

[00:02:42]
I mean, yeah, we could have just moved this back to, no, okay, well, I won't, cuz it just throws an error. We could have just named this like listings container component about tsx, or listings component, it doesn't matter. Personally, I prefer this, but if you prefer anything else, that's completely fine.

[00:02:57]
I don't know if there is the best way to do it, I think every developer kind of uses their own way of folder structure naming files.