Drawbacks of Simple Implementation
Explore the limitations of a basic polymorphic component implementation in React using TypeScript. Understand problems like passing invalid HTML elements and incorrect attributes, which can lead to rendering errors and poor development feedback. This lesson prepares you to recognize key flaws that need addressing for robust component design.
We'll cover the following...
We'll cover the following...
We now have something of a standard polymorphic implementation. However, our implementation has a few problems. One of those problems is that the polymorphic prop can receive invalid HTML elements.
For example, it's currently possible for a user to go ahead and write something like the following:
<PolymorphicText as="educative">Hello Wrong Element</PolymorphicText>
Passing a wrong as attribute
The as prop passed here is educative.
The educative prop is obviously an incorrect HTML element, but the browser still tries to render it.
Inspecting the rendered element
Click the "Run" button and inspect the element rendered in the playground widget below.
ã F ) 9 5 @@ ° n PNG
IHDR (-S äPLTE""""""""""""""""""2PX=r)7;*:>H¤-BGE8do5Xb6[eK®K¯1MU9gs3S\I§:gt'03@{V¹ÔT´ÏA}V»Ö@y6\fH¦-CII¨E+;@7_i7_jFJ«K°H£-BHaÚû,@FCL³&.0W½ÙN£ºI¨$)+BJªR¯È?v>s>uS±Ê=qP©ÁP¨ÀP§¿,?D4U^%+-M ¶K®%+,2OX+<AL²#&&D%,.I©vôTö tRNSIæçJäeÀe¦ ©IDATxMµZEA ÿÙ³ îî%R¡ïßáTThÇG
»,Á®Å=²ÒîmífímnfA$â>!¦gºôHg½Eßܵ} Ý»ýº¼kdú§¯JoÎ3æL"J¹ ÌÕüQ$âçļ ffµ,é5i9̯H¨ /mBwÍÜw;D
Ø+&W«ª¹¨Dôo@Ê´RI©ÐB¡om.Û³À IEND®B`PNG
IHDR שÍÊ ePLTE""""""""""""""""""""""""2RZN¢¹J«3R[J¬)59YÁÞ0KS4W`Q«ÄL²%+-0JR)6::gtC"##?vU·Ñ?w<n{&-/YÂß=q:iuBA}A{B/IPP§¿=qK®_ÔóL³$();lzR¯ÉaÚûI¨ZÆã3U^1MU3T]ZÅâI§X¿ÜF-BGP¨À6[e,@E5ZdO§¿-BHX¿Û+=AW¾Ú,@FW¼ØQªÃ?v
W¼×+<A@y"#$\Ìê4Wa\ÌëS²Ì$(*.EL^ÑñVºÕ6]h#$%G¡#&';jwV¹Ô-CIL±ZÄá^Ðï>uS°Ê/HNM ·_Õõ\ËéM ¶8doD
D>t+=B[Èæ,>C>t<o}@y0LS.EKT´Î$'(%,.A~W½ÙC%+,\ÊèC!ä tRNSíîG¾Ö OIDATxlÃB¶Q
u´ß_ȳ<˦Ýv eê²óa6Aξûv¢{@Î E' Þd IÕ!ç í ðCÔT þg 1ÂE(ÏñSQsâi
Ä
Zÿ·V¹ Ð)ég!ªhÎùtéº-i}µµ<Õ?¶lBZaÄ´4{DÓâ»_e8¥yÇÀ 3)¥?°f;8.ã ¤tÌ=å; :ã52fKZìlù¨ØÍ9.#ÒAÁqÌúÛ ®£Vÿ`=$¬Â?_¶¾®ÔqMç.ïJ$
?^q÷ñíÛï.},ìsæÝ _TttÔ¾ 1#/(ì-[è`è`ÌÚïÅðZ d5?ÎebZ¿Þi.Ûæ ìqÎ+1°}Â5ù ïçd¨GÏø IEND®B`PNG
IHDR D¤Æ APLTE """""""""""""""""""""""""""2RZVºÖ_ÔôU·Ñ=r$()'25]ÎíC0LS<o}XÀÜX¿Û0JQ=p~D<n{VºÕE8do_ÔóEFH¥9dp_ÕõH¤I¨F6[e`Ö÷`×øL³/GM_ÓòU¸Ó'02P©Á/IPPªÂX¿Ü&/1;ly3R[`ØøG¡T³Í\ÌêaÚû1OW"##Q«ÄaÙúR®Ç=q`Öö.EL+=ATµÐ-CIK®#&'C^ÐïI¨&.04U^^Ñð@yZÇä$(*[Éç^Ññ,?DR¯É"#$1NV1MTD
>u;kxG R¯È/HN&-/@y>s>t@z]ÍìP¨À$'(D]Ïî<n|0JRU·Ò×\¼ tRNS %ñ'ïó(ò~ÑÝè IDATxC1F_Ý¿MmÛ¶4¶m{ÿ ¤nçáÓ ®A$à$b HeøTãWÄÂhh´:PtZ
Q«0@.`Þ`4-V`³Zì&A#ÁébkÝÄãñúØ>.''ø`C$FØÏ (±x"6XácTÚéL§@Iù;d d-¹|¾P,È9¡RÕÍf3¢¿F½VmM íX§ÚíÍç@Y7ÎõºÕN¬= åÈʪu
}Ö¬«+eaiq ¤Ö76íÝ=h
ûZìíî lë}á¨Ê±¥[F«I9A¹k9¥Öë ä3¢Ã9ΡóqB~Øáb¸ÃåU_¸^Ü [·ôwý{zvzÙ(£(£(þfòqÉGÉïkñÏçY¾ÿªfäòÇ~à:*4ÓQ\O> ¼<×úW£éÍZ|ÞÅ7ñïjTÔäãn½»¢®`$Hð+ò¿GOñûð*èxø¥X*|^ÿd IEND®B`PNG
IHDR @ @ ·ì :PLTE """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%+-@yW¼×`×ø^ÑñS²ÌC,>C*8<XÁÝaÚûaÙùMµ+<AaÙúXÀÜ#%%TµÐL´=q>uK°`ÖöA}L±8do=r%+,@y^ÐïS²Ë)59=qP©ÁU·Ò"#$PªÂ\Êè0JQQªÃ"##U·Ñ#&&_Ôô>t>s`Øø_Ôó5Yc1OW5Zd1NV+=B1MU+;@/GM\Ìê*;?3S\)8<2RZ_Õõ+=A]Ïî,@F,@E&-/0KS7alO¦¾9dp8amB~EP¨ÀN¢¹'023T]]Îí?x3U^C6\gU¸Ó&.0D7_iRÆH¥I¨M ¶$(*?v
ZÆãX¿Ü-AG#$%[Éç8co[ÈæW½ÙC'25?v8bn%*+L²N£º2PX)7;=p~(58^ÒòP§¿4WaQ«ÄT´Ï0JRQ¬ÅT´ÎI¨6]hR¯ÉT³Í0LSF9eqEE9gsFC#&'\Ëé`Ö÷&/16\fBA{R®Ç]Íì(47%,.*:>*9=9fr:gt7^iU¶Ð?wZÇäX¿Û^ÑðQÅH£)6:V¹Ô'034U^E.EL.FMK®@zS× tRNS *×øÖý »½+üùóÔ,ØúôÀ=V IDATx¤ËµC! ÐïC|ÿãÚ^yR]ÕMÛáO]ßÔÕÝ0NÈ2ÍËí¿"ªª¢(0Vã(ÀY%PDT-~(m¬ó!âK ÞY£~´üIÒf{³Û Þáa¼§§ô3ÕOp& Ф¡ x÷#jôÚ¶mméòc)]m¤É)Ƨgfçhk²ñÎÒ ægg¦ÇìÐ+XÅêuiyVת·k«°²\[ü:,Ø6ØÜjIJ
;»"»;°×XùþÛfÁáÇÍûýSÎÎÏÏ8=Þo¾;æèÐ(öÓ¥BkÔeûÍ\7p+mîîáþNÚ<ÀQðOÒæùô³´yg»ttÐëoý½£ìVð»Òäsýü¬ø&_ðaüïV~à·Ö?*8àQ ;8¥Á,¸¤ f¥ 1 Üx¤×§ñ*øÑA¯Ôð°a#±³¶¦#nPi+¼¶CÈ,ÆèäÍ_áNbÑáøç HB*ÚÒ¦ L( ^<ñÃL6pJ¾PÉ¥©¢%"R,ä9Èe3eRËa1(
¢ßqÇ8Ù´mK˱mƶmÛü·yi!èΪYÏuë ÀÏ_Àï?i÷ý+òÄA|ù{´?¿_En).JËD¤<
©¬¢Z\Ts©R*( ¯©J
uX/
4J9¡5·DEµ4kÇ4&i¥V4Ú¡®Ð¯vsf:àg,¢èBC»î$¶ºÍùîá@ôI_?< ! ^ÈàÓ½ÇöäõB%Làw±FD1Á¨(F ±ø H%0Ʊ¿ÅØ(¢0ÅÄ'ÅæN.0u@íYPWìIüaNâK Ä?ðÓµ=ev/c±Ó0c0÷2Êë:06R-uÒÄ\Q̶ää´¼µ6R#
ÆF³6Òñ·rÕìuæmâðÂIñi~ Åü ÃsPþ"± ó¼
eiyå£ËPàãÊò§¡ÝÒ,S]U¦ºV
ªÖ©®Z¦êoëë·xzãâÆSnm¬{ÚºwaÙÏ
Å»´Ýõ(mg/®þå½À¿¼û[§b³µq¶Å&Õ¯¹$ñzÈH>aÌKT1/æø1O0¾.hÍYþAÓö£
-ê>Ûº«¢XÕ¢î}ߨë ÛÑ;ÃöN´ØvÅýθÿ1 ë×ÄO@&v/Äþ_ö\ôÇ\í.½+0; !fÊ ¦´Ó% JY·OÂ'/Å]_;ßÀ'"&Nªn aQ^ cx¦AáÒ IEND®B`Passing the incorrect HTML element to the as prop
We should see an educative element rendered to the DOM.
This is far from ideal.
An optimal development experience should show some kind of error during development, in this case, to prevent the user from passing an invalid HTML element in the as prop. For example, a user may make a simple typo—divv instead of div—and they will get no indication of what’s wrong during development.
Incorrect attributes for valid elements
Let's consider the following component usage, which has incorrect attributes passed to the polymorphic component. In this example, an href attribute is passed to a span element.
ã F ) 9 5 @@ ° n PNG
IHDR (-S äPLTE""""""""""""""""""2PX=r)7;*:>H¤-BGE8do5Xb6[eK®K¯1MU9gs3S\I§:gt'03@{V¹ÔT´ÏA}V»Ö@y6\fH¦-CII¨E+;@7_i7_jFJ«K°H£-BHaÚû,@FCL³&.0W½ÙN£ºI¨$)+BJªR¯È?v>s>uS±Ê=qP©ÁP¨ÀP§¿,?D4U^%+-M ¶K®%+,2OX+<AL²#&&D%,.I©vôTö tRNSIæçJäeÀe¦ ©IDATxMµZEA ÿÙ³ îî%R¡ïßáTThÇG
»,Á®Å=²ÒîmífímnfA$â>!¦gºôHg½Eßܵ} Ý»ýº¼kdú§¯JoÎ3æL"J¹ ÌÕüQ$âçļ ffµ,é5i9̯H¨ /mBwÍÜw;D
Ø+&W«ª¹¨Dôo@Ê´RI©ÐB¡om.Û³À IEND®B`PNG
IHDR שÍÊ ePLTE""""""""""""""""""""""""2RZN¢¹J«3R[J¬)59YÁÞ0KS4W`Q«ÄL²%+-0JR)6::gtC"##?vU·Ñ?w<n{&-/YÂß=q:iuBA}A{B/IPP§¿=qK®_ÔóL³$();lzR¯ÉaÚûI¨ZÆã3U^1MU3T]ZÅâI§X¿ÜF-BGP¨À6[e,@E5ZdO§¿-BHX¿Û+=AW¾Ú,@FW¼ØQªÃ?v
W¼×+<A@y"#$\Ìê4Wa\ÌëS²Ì$(*.EL^ÑñVºÕ6]h#$%G¡#&';jwV¹Ô-CIL±ZÄá^Ðï>uS°Ê/HNM ·_Õõ\ËéM ¶8doD
D>t+=B[Èæ,>C>t<o}@y0LS.EKT´Î$'(%,.A~W½ÙC%+,\ÊèC!ä tRNSíîG¾Ö OIDATxlÃB¶Q
u´ß_ȳ<˦Ýv eê²óa6Aξûv¢{@Î E' Þd IÕ!ç í ðCÔT þg 1ÂE(ÏñSQsâi
Ä
Zÿ·V¹ Ð)ég!ªhÎùtéº-i}µµ<Õ?¶lBZaÄ´4{DÓâ»_e8¥yÇÀ 3)¥?°f;8.ã ¤tÌ=å; :ã52fKZìlù¨ØÍ9.#ÒAÁqÌúÛ ®£Vÿ`=$¬Â?_¶¾®ÔqMç.ïJ$
?^q÷ñíÛï.},ìsæÝ _TttÔ¾ 1#/(ì-[è`è`ÌÚïÅðZ d5?ÎebZ¿Þi.Ûæ ìqÎ+1°}Â5ù ïçd¨GÏø IEND®B`PNG
IHDR D¤Æ APLTE """""""""""""""""""""""""""2RZVºÖ_ÔôU·Ñ=r$()'25]ÎíC0LS<o}XÀÜX¿Û0JQ=p~D<n{VºÕE8do_ÔóEFH¥9dp_ÕõH¤I¨F6[e`Ö÷`×øL³/GM_ÓòU¸Ó'02P©Á/IPPªÂX¿Ü&/1;ly3R[`ØøG¡T³Í\ÌêaÚû1OW"##Q«ÄaÙúR®Ç=q`Öö.EL+=ATµÐ-CIK®#&'C^ÐïI¨&.04U^^Ñð@yZÇä$(*[Éç^Ññ,?DR¯É"#$1NV1MTD
>u;kxG R¯È/HN&-/@y>s>t@z]ÍìP¨À$'(D]Ïî<n|0JRU·Ò×\¼ tRNS %ñ'ïó(ò~ÑÝè IDATxC1F_Ý¿MmÛ¶4¶m{ÿ ¤nçáÓ ®A$à$b HeøTãWÄÂhh´:PtZ
Q«0@.`Þ`4-V`³Zì&A#ÁébkÝÄãñúØ>.''ø`C$FØÏ (±x"6XácTÚéL§@Iù;d d-¹|¾P,È9¡RÕÍf3¢¿F½VmM íX§ÚíÍç@Y7ÎõºÕN¬= åÈʪu
}Ö¬«+eaiq ¤Ö76íÝ=h
ûZìíî lë}á¨Ê±¥[F«I9A¹k9¥Öë ä3¢Ã9ΡóqB~Øáb¸ÃåU_¸^Ü [·ôwý{zvzÙ(£(£(þfòqÉGÉïkñÏçY¾ÿªfäòÇ~à:*4ÓQ\O> ¼<×úW£éÍZ|ÞÅ7ñïjTÔäãn½»¢®`$Hð+ò¿GOñûð*èxø¥X*|^ÿd IEND®B`PNG
IHDR @ @ ·ì :PLTE """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%+-@yW¼×`×ø^ÑñS²ÌC,>C*8<XÁÝaÚûaÙùMµ+<AaÙúXÀÜ#%%TµÐL´=q>uK°`ÖöA}L±8do=r%+,@y^ÐïS²Ë)59=qP©ÁU·Ò"#$PªÂ\Êè0JQQªÃ"##U·Ñ#&&_Ôô>t>s`Øø_Ôó5Yc1OW5Zd1NV+=B1MU+;@/GM\Ìê*;?3S\)8<2RZ_Õõ+=A]Ïî,@F,@E&-/0KS7alO¦¾9dp8amB~EP¨ÀN¢¹'023T]]Îí?x3U^C6\gU¸Ó&.0D7_iRÆH¥I¨M ¶$(*?v
ZÆãX¿Ü-AG#$%[Éç8co[ÈæW½ÙC'25?v8bn%*+L²N£º2PX)7;=p~(58^ÒòP§¿4WaQ«ÄT´Ï0JRQ¬ÅT´ÎI¨6]hR¯ÉT³Í0LSF9eqEE9gsFC#&'\Ëé`Ö÷&/16\fBA{R®Ç]Íì(47%,.*:>*9=9fr:gt7^iU¶Ð?wZÇäX¿Û^ÑðQÅH£)6:V¹Ô'034U^E.EL.FMK®@zS× tRNS *×øÖý »½+üùóÔ,ØúôÀ=V IDATx¤ËµC! ÐïC|ÿãÚ^yR]ÕMÛáO]ßÔÕÝ0NÈ2ÍËí¿"ªª¢(0Vã(ÀY%PDT-~(m¬ó!âK ÞY£~´üIÒf{³Û Þáa¼§§ô3ÕOp& Ф¡ x÷#jôÚ¶mméòc)]m¤É)Ƨgfçhk²ñÎÒ ægg¦ÇìÐ+XÅêuiyVת·k«°²\[ü:,Ø6ØÜjIJ
;»"»;°×XùþÛfÁáÇÍûýSÎÎÏÏ8=Þo¾;æèÐ(öÓ¥BkÔeûÍ\7p+mîîáþNÚ<ÀQðOÒæùô³´yg»ttÐëoý½£ìVð»Òäsýü¬ø&_ðaüïV~à·Ö?*8àQ ;8¥Á,¸¤ f¥ 1 Üx¤×§ñ*øÑA¯Ôð°a#±³¶¦#nPi+¼¶CÈ,ÆèäÍ_áNbÑáøç HB*ÚÒ¦ L( ^<ñÃL6pJ¾PÉ¥©¢%"R,ä9Èe3eRËa1(
¢ßqÇ8Ù´mK˱mƶmÛü·yi!èΪYÏuë ÀÏ_Àï?i÷ý+òÄA|ù{´?¿_En).JËD¤<
©¬¢Z\Ts©R*( ¯©J
uX/
4J9¡5·DEµ4kÇ4&i¥V4Ú¡®Ð¯vsf:àg,¢èBC»î$¶ºÍùîá@ôI_?< ! ^ÈàÓ½ÇöäõB%Làw±FD1Á¨(F ±ø H%0Ʊ¿ÅØ(¢0ÅÄ'ÅæN.0u@íYPWìIüaNâK Ä?ðÓµ=ev/c±Ó0c0÷2Êë:06R-uÒÄ\Q̶ää´¼µ6R#
ÆF³6Òñ·rÕìuæmâðÂIñi~ Åü ÃsPþ"± ó¼
eiyå£ËPàãÊò§¡ÝÒ,S]U¦ºV
ªÖ©®Z¦êoëë·xzãâÆSnm¬{ÚºwaÙÏ
Å»´Ýõ(mg/®þå½À¿¼û[§b³µq¶Å&Õ¯¹$ñzÈH>aÌKT1/æø1O0¾.hÍYþAÓö£
-ê>Ûº«¢XÕ¢î}ߨë ÛÑ;ÃöN´ØvÅýθÿ1 ë×ÄO@&v/Äþ_ö\ôÇ\í.½+0; !fÊ ¦´Ó% JY·OÂ'/Å]_;ßÀ'"&Nªn aQ^ cx¦AáÒ IEND®B`Passing incorrect attributes to the polymorphic component
A consumer can pass a span element to the as prop and the href prop. This is technically invalid. A span element does not (and should not) take in an href attribute. That is an invalid HTML syntax.
However, as it stands, a consumer of the component we've built could go ahead and write this, and they wouldn't get any errors during development.