React Compound Components

[@CognitiveSurge]

Hey 👋 what do you think about Compound Components in React? Do you have a favourite design pattern? Let me know! 👇

[@outbacklife2025]

i make them on 8 different monitors

[@adammescher]

As I have stumbled down the Compound Components rabbit hole, this was exactly what I needed -- all of the pieces assembled in real-time narrated by someone who is capable. Thank you for your time and effort making this.

[@CognitiveSurge]

You are welcome Adam!

[@martinfoakes4775]

Good stuff! That use of the index.js file in your components folder is one of those things where, as soon as I saw it, I immediately wondered why I had never done that before

[@CognitiveSurge]

I had that same lightbulb moment happen to me a few months back 😆

[@jasonmiani8108]

^^

[@keduslejiyared8701]

I learnt a lot from this video and I'm not even halfway through! Thank you, Karl.

[@CognitiveSurge]

Glad it was helpful!

[@lakshyamunjal5608]

I have never heard of Compound components before and after watching this video, I totally understand it. Thanks Karl!

[@CognitiveSurge]

Happy to help!

[@cv3787]

I tried to rewrite this in TypeScript but was unsuccessful. How do I write Card.Body etc without getting errors by TS?

[@danva9273]

This was my first React mini-project, simple yet informative, thanks!

[@CognitiveSurge]

Great to hear!

[@DarrylHebbes]

Compound Components basically start at 9:10 mark

[@kostya3312]

Thanks for useful tutorial. One note - className prop of Card component is overrided by className prop of Container component (through restProps destructuring). There is same issue for other components too. As a result there will not be classes 'card', 'card__body' and others in the final markup.

[@CognitiveSurge]

Ahh yes, my bad. If you switch from 'className' to 'classes' when passing down additional classnames, it should retain the set class that is set under the hood and allow you to additionally add anything on. Great spot my friend, will update the repo with 'classes' for the example on Card.

[@LumbreraEnMiCamino]

how can do this with React and typescript? including props and interfaces

[@CognitiveSurge]

Will show in a future video

[@rofazayn]

After watching your video I realized how stupid the way I am using styled-components is 😂 Thanks Karl, great content as always.

[@CognitiveSurge]

Don’t worry, I did the exact same thing many times 😂 at first I wasn’t a fan because I wasn’t using them correctly, now I understand them, I love them 😀 thanks dude 🙌

[@juliuscecilia6005]

Learned so much from this! Beginning to use this in my projects! Thank you so much! :D

[@CognitiveSurge]

Great to hear!

[@outbacklife2025]

sir instead of the joker image can i display a image of what th euser uploaded for like a apartment are room search?

[@CognitiveSurge]

Yep, can do

[@govindkothari7989]

@Karl Hadwen i have one dought like for representing an image we have to use img tag so like how card.Image is replacing the img tag Or card.Image will convert to img tag depending upon what props we passed on card.Image

[@CognitiveSurge]

I'm not too sure what you mean?

[@VitorBoccio]

why do u use the classname library? I mean, Styled components already create dynamic classes names and if you import from 'styled-components/macro' the class name will contain your component name as well.

[@CognitiveSurge]

I was being lazy, you can use that or just use export function classNames(...classes) { return classes.filter(Boolean).join(' '); }

[@lukaszwalczak3814]

Can someone please explain dot notation? What's the point of doing it?

[@CognitiveSurge]

It's a marmite pattern, some find it useful and others not so much. I was just experimenting with things mainly when researching the pattern

[@lukaszwalczak3814]

@@CognitiveSurge I like marmite. Especially on toasts :). I think my question should've been 'How does dot notation translate to JS world? Is Card.Title like a property of the Card component? Like in objects - object.property?' Cheers, mate.

[@tallahondro]

Loved the video, still not sure how the dot notation is working under the hood for something like Card.Image = f(n). Do functions take on the same behavior as objects in JS? You are essentially declaring a function onto another function?

[@CognitiveSurge]

Yep, pretty much that! Give this a read, it should help: blog.bitsrc.io/the-chronicles-of-javascript-objects-2d6b9205cd66#:~:text=Almost%20everything%20in%20JavaScript%20is,primitive%20values%20or%20primitive%20types. - apologies for the slow responsive!

[@well.8395]

In your styled/Card.js file - Line 42, there's an error. className={(classNames('card__image'), classes)} should be className={classNames('card__image', classes)}

[@CognitiveSurge]

Oops xD

[@user-uh3zr7mo4i]

I really needed this, thanks Karl

[@CognitiveSurge]

Glad I could help :)

[@Skia_]

I'm loving the accent ;D Greetings from Lebanon.

[@CognitiveSurge]

🤣 thanks dude! Greetings from Leeds, UK! I hope all is going great and you have an awesome 2020!

[@baldmannnnn]

Hi Karl! I'm able to understand and use compound component pattern on my react projects because of this tutorial. But now I'm trying to implement it on typescript and I'm having all sorts of problems. Can you make a video about compound component pattern with styled components using typescript?

[@CognitiveSurge]

Will take a look!

[@buntybru3106]

Thanks Karl

[@CognitiveSurge]

Np!

[@emaxix7]

Great video! What's the name of the font-family you use on VSCode?

[@CognitiveSurge]

All in my setup video :)

[@Abhishek-dp5tc]

font-smooth is unknown property.....it shows in codesandbox

[@CognitiveSurge]

There' are a few compatibility issues at the moment with font-smooth but they should be resolved in the future hopefully

[@saisharathsamala5922]

Very good useful video 👌

[@CognitiveSurge]

Thanks a lot!

[@inayatcassambai469]

I feel like there isn't a major difference between the 2 examples you showed at the start of the video. I personally would prefer to go with the example on the left. Yes i would have to create individual component files for each element, but this way, each component would be encapsulated within it's own file which is something i prefer. The method you demonstrated has all the component logic in one file which makes it feel cluttered to me. But again, these are just opinions and everyone has their own preferred way of working! I could still have a folder in the components directory called cards. And then have all the relevant card components live in this folder accompanied by a index.js file. Then i can use this to import only the components i need like so: import {CardTitle, CardBody} from './components/cards'

[@CognitiveSurge]

You make a good point. I did use this method of design in the Netflix video I recently did, but on a larger scale, I'm not sure I like compound components, I'm on the fence. I'm half way through an Instagram clone and went back to just regular components and I think I'm actually enjoying using them more.

[@inayatcassambai469]

@@CognitiveSurge You may find this article interesting! epicreact.dev/soul-crushing-components/

[@CognitiveSurge]

@@inayatcassambai469 Will read that in the morning. Thanks for commenting btw, these type of discussions are one of the reasons I created this channel!

[@amirnoorani5017]

Extremely helpful!

[@CognitiveSurge]

Thank you!

[@omarhassan2548]

This is another great video Thanks Broo

[@CognitiveSurge]

Thanks Omar!

[@ManuelNyC77]

I'm sorry, I can't understand why you use the functions in the components, as an example, Card.Body = function CardBody, I can't get why you use the function CardBody :/ can someone help me?

[@CognitiveSurge]

I use it to wrap all the other components inside and apply styles to it

[@zourdy697]

mate would be great if you create content about advanced react patterns or context.

[@CognitiveSurge]

Definitely! Those are quicker to do too xD

[@MaganDesigns]

My portfolio tanks you a million.

[@CognitiveSurge]

haha

[@iali1046]

Awesome 👏

[@merveillevaneck5906]

im failing to see what exactly the implementation benefit is to this approach on this specific example? can anyone maybe help my stupid ass see the benefit?

[@CognitiveSurge]

This comment did make me lol...it's basically just a pattern that's used in design libraries, so for example if you had 10 people using one of your comments but they wanted only certain aspects, they could just pull in the one component and then get the stuff they need, e.g. - and use it as it, you can do the same with individual components but it becomes a bit tedious. But all in in, it's just a pattern and up to the user to decide which they like best :) hope that helps!

[@Abhishek-dp5tc]

make more videos on styling in React, Also you can make on Tabs, Accordion(components)

[@CognitiveSurge]

Tailwind videos coming but also much more CSS videos!

[@Max14211]

@@CognitiveSurge Aw man that's going to be dope im looking forward to it :D. Just to pick your brain for a second, I heard the some of the team-members who where part of tailwind created ThemeUI as a sort of successor to tailwind. I was wondering, on a production level, do you think that tools like Tailwind will just become a sort of passing fad and people will move into more barebones tools like ThemeUI or do you think that startups and mid-size companies will prefer heavier CSS frameworks going forward and that tailwind is more for smaller projects? P.S Just wondering your thoughts, its the tech world and no one predicts it right LOL so i'm not going to hold you to perfection or anything just your gut reaction to a random question lol. Cheers for all the videos :)

[@EcklerV]

Can't you just write like this? Card.Title = Title. Isn't it the same? I mean styled component basically takes it's props and pass them down or am I mistaken? Do you do it just to add classname ?

[@CognitiveSurge]

Yep, I did it just to add classname, but now I don't use classNames at all. I've removed it completely and handle all my styling via a styled component

[@EcklerV]

@@CognitiveSurge Could you please share a chunk of code that illustrates your new approach? I'm new to styled components and trying to figure out the best way to use them. Thanks in advance!

[@BrunoWinck]

Another great one, keep sharing :)

[@CognitiveSurge]

Thanks Bruno! Hope you're well and happy new year!

[@avneet12284]

Didn't realize that adding a dot makes them children. WOW ! 😮

[@CognitiveSurge]

:)

[@abiakhil69]

Awesome content

[@CognitiveSurge]

Thanks dude

[@unknownman1]

Hey Karl sorry to say this, but didn't understand the concept clearly. I came here because in Netflix tutorial you've used styled components.

[@unknownman1]

Alright, I read the docs and watched the video again and understood the concept now. Thanks Karl.

[@CognitiveSurge]

Glad you understood it dude! I'm moving or I'd have been able to help more!

[@kewalos96]

Seems cool, but I don't think it's for me.