{"id":2151,"date":"2021-09-13T16:43:31","date_gmt":"2021-09-13T16:43:31","guid":{"rendered":"https:\/\/blog.embold.io\/?p=2151"},"modified":"2021-09-14T07:47:33","modified_gmt":"2021-09-14T07:47:33","slug":"how-to-conditionally-add-attributes-to-react-components","status":"publish","type":"post","link":"https:\/\/blog.embold.io\/de\/how-to-conditionally-add-attributes-to-react-components\/","title":{"rendered":"How to conditionally add attributes to React Components?"},"content":{"rendered":"\n<p> In React, it is possible to add attributes or prop or class names to a component only if a certain condition is met.  <\/p>\n\n\n\n<p>For example, let\u2019s say you have a general card component with minimal styles :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.card{\n   width: 300px;\n   height: 200px;\n   border: 1px solid black;\n}<\/code><\/pre>\n\n\n\n<p> But then there are certain cases where based on the type prop passed to the component, you want to add a box-shadow to the card with the class below. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.card-shadow{\n  box-shadow: 5px 10px #888888\n}<\/code><\/pre>\n\n\n\n<p>To do that we\u2019ll have our card component like so:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\n\nconst Card = (props) =&gt;{\n return(\n   &lt;div className={`card ${props.cardType === 'shadow' &amp;&amp; \"card-shadow\" }`}&gt;\n     {props.children}\n   &lt;\/div&gt;\n )\n}\n\nexport default Card;\n<\/code><\/pre>\n\n\n\n<p>In the code above, we use template literals to embed the logical AND statement within the className string. The AND operator checks if the cardType prop is equal to shadow and adds the card-shadow class if it is to the card component.&nbsp;<\/p>\n\n\n\n<p>Then in the App component, we can use the Card component to test:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react'\nimport ReactDOM from 'react-dom'\nimport Card from '.\/Hello'\nimport '.\/style.css';\n\nclass App extends React.Component {\n render() {\n   return (\n     &lt;div&gt;\n       &lt;Card cardType=\"shadow\"\/&gt;\n       &lt;Card\/&gt;\n     &lt;\/div&gt;\n   )\n }\n}\n\nReactDOM.render(\n &lt;App \/&gt;,\n document.getElementById('container')\n);\n<\/code><\/pre>\n\n\n<p><span style=\"color: #ff0000\">Blog Credits: Linda Ikechukwu<\/span><\/p>\n<div>\u201d Linda Ikechukwu is a Frontend Developer turned Technical Content Consultant. She enjoys strategizing on and creating content that helps tech startups connect with their target audience. \u201c<br \/><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-2189\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot.jpeg\" alt=\"\" width=\"150\" height=\"210\" srcset=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot.jpeg 715w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot-585x819.jpeg 585w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/div>","protected":false},"excerpt":{"rendered":"<p>In React, it is possible to add attributes or prop or class names to a component only if a certain condition is met. For example, let\u2019s say you have a&hellip;<\/p>\n","protected":false},"author":10,"featured_media":2179,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[202,179,167],"better_featured_image":{"id":2179,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":3000,"height":2000,"file":"2021\/09\/embold-blog-add-attribute.png","sizes":{"thumbnail":{"file":"embold-blog-add-attribute-150x150.png","width":150,"height":150,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute-150x150.png"},"medium_large":{"file":"embold-blog-add-attribute-768x512.png","width":768,"height":512,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute-768x512.png"},"penci-full-thumb":{"file":"embold-blog-add-attribute-1170x780.png","width":1170,"height":780,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute-1170x780.png"},"penci-slider-thumb":{"file":"embold-blog-add-attribute-1170x663.png","width":1170,"height":663,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute-1170x663.png"},"penci-magazine-slider":{"file":"embold-blog-add-attribute-780x516.png","width":780,"height":516,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute-780x516.png"},"penci-slider-full-thumb":{"file":"embold-blog-add-attribute-1920x800.png","width":1920,"height":800,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute-1920x800.png"},"penci-single-full":{"file":"embold-blog-add-attribute-1920x1280.png","width":1920,"height":1280,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute-1920x1280.png"},"penci-thumb":{"file":"embold-blog-add-attribute-585x390.png","width":585,"height":390,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute-585x390.png"},"penci-masonry-thumb":{"file":"embold-blog-add-attribute-585x390.png","width":585,"height":390,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute-585x390.png"},"penci-thumb-square":{"file":"embold-blog-add-attribute-585x585.png","width":585,"height":585,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute-585x585.png"},"penci-thumb-vertical":{"file":"embold-blog-add-attribute-480x650.png","width":480,"height":650,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute-480x650.png"},"penci-thumb-small":{"file":"embold-blog-add-attribute-263x175.png","width":263,"height":175,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute-263x175.png"},"jr_insta_square":{"file":"embold-blog-add-attribute-640x640.png","width":640,"height":640,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute-640x640.png"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":2151,"source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-add-attribute.png"},"translation":{"provider":"WPGlobus","version":"2.10.8","language":"de","enabled_languages":["en","es","de","fr","ru"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"es":{"title":false,"content":false,"excerpt":false},"de":{"title":false,"content":false,"excerpt":false},"fr":{"title":false,"content":false,"excerpt":false},"ru":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/posts\/2151"}],"collection":[{"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/comments?post=2151"}],"version-history":[{"count":4,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/posts\/2151\/revisions"}],"predecessor-version":[{"id":2191,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/posts\/2151\/revisions\/2191"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/media\/2179"}],"wp:attachment":[{"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/media?parent=2151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/categories?post=2151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/tags?post=2151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}