---
title: "Discussion on \"Polymorphic components in React\" | Hashnode"
description: "Discussion on \"Polymorphic components in React\". But it's not what you think."
url: "https://hashnode.com/posts/polymorphic-components-in-react/65d1053c3e8dc8840410d06c"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Polymorphic components in React](https://typeofweb.com/polymorphic-components-in-react?utm_source=hashnode&utm_medium=feed)

But it's not what you think.

Feb 17, 2024 · 5 min read · typeofweb.com  
Read the article

-   [#nextjs](https://hashnode.com/tag/nextjs)
-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#typescript](https://hashnode.com/tag/typescript)
-   [#javascript](https://hashnode.com/tag/javascript)

## Written by

[Michał Miszczyszyn](https://hashnode.com/@typeofweb)

@typeofweb · San Francisco

  
[View profile](https://hashnode.com/@typeofweb)

yournextstore.com

I build software | Startupper / Blogger / Activist / Published Author / Speaker / He, him

## Responses 1

Markdown supported · ⌘↵ to post

[Gerald Baldie](https://hashnode.com/@geraldbaldie)

[Feb 24, 2024](https://hashnode.com/posts/polymorphic-components-in-react/65d1053c3e8dc8840410d06c/comment/65d9df1db6f099b7b6274287)

Buy High Quality Counterfeit Money/Buy cloned cards online/Buy PayPal Top-up/WhatsApp…..+49 1521 9324117/Telegram: @matrixccc [t.me/thematrixshops/https://thematrixcartel.store](https://t.me/thematrixshops/https://thematrixcartel.store/)

Fake Euro notes and Cloned credit cards available for sale. We also do PayPal transfer Topups. Tap in for more information on our services. Telegram username: @matrixccc [t.me/thematrixshops](https://t.me/thematrixshops) [thematrixcartel.store](https://thematrixcartel.store/) Whatsapp +49 1521 9324117 Ψεύτικα χαρτονομίσματα ευρώ και κλωνοποιημένες κάρτες προς πώληση Ψεύτικα χαρτονομίσματα ευρώ και κλωνοποιημένες πιστωτικές κάρτες προς πώληση. Κάνουμε επίσης PayPal μεταφορά Topups. Πατήστε για περισσότερες πληροφορίες σχετικά με τις υπηρεσίες μας. Όνομα χρήστη Telegram: @matrixccc [t.me/thematrixshops](https://t.me/thematrixshops) Κανάλι Whatsapp +49 1521 9324117

[thematrixcartel.store](https://thematrixcartel.store/)

Buy counterfeit money Grade AAA Quality Counterfeit Money For Sale Buy Greece (EUR €) The Matrix Cartel [thematrixcartel.store](https://thematrixcartel.store/)

WhatsApp…..+49 1521 9324117

[Mariusz Kowalski](https://hashnode.com/@Snien)

[Feb 18, 2024](https://hashnode.com/posts/polymorphic-components-in-react/65d1053c3e8dc8840410d06c/comment/65d286b86e214c4fb603edb0)

Can this pattern be combined with StyledComponents? If so, how to do it right?

[Michał Miszczyszyn](https://hashnode.com/@typeofweb)

[Feb 19, 2024](https://hashnode.com/posts/polymorphic-components-in-react/65d1053c3e8dc8840410d06c/comment/65d286b86e214c4fb603edb0#reply-65d335b36e035e36b33c9347)

No clue. I don't use styled components and I don't recommend using them to anyone.

[Mariusz Kowalski](https://hashnode.com/@Snien)

[Feb 21, 2024](https://hashnode.com/posts/polymorphic-components-in-react/65d1053c3e8dc8840410d06c/comment/65d286b86e214c4fb603edb0#reply-65d658ad5ffe3f7c88097a27)

[Michał Miszczyszyn](https://hashnode.com/@typeofweb)

Ok, then I am missing a key piece of information in the presented pattern - how to pass information to < UIButton /> about what state the placed children are in, especially when our UI is dependent on the state of the application (spinner animation in the UIButton when it processes a request, or disabled state) e.g:

< UIButton > < button > Send Request < / button > < / UIButton >.

< Link >Try to redirect < / Link > < / UIButton >.

[Michał Miszczyszyn](https://hashnode.com/@typeofweb)

[Feb 24, 2024](https://hashnode.com/posts/polymorphic-components-in-react/65d1053c3e8dc8840410d06c/comment/65d286b86e214c4fb603edb0#reply-65d9e7430458829619862f74)

[Mariusz Kowalski](https://hashnode.com/@Snien) that's a good point; the UI components could accept props that influence how they look, i.e. variant or disabled.
