The latest articles on DEV Community by Yusuff, Olawumi Qauzeem (@qausim). https://dev.to/qausim https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F171884%2Feb7c11c0-8f2f-4b54-9276-a4129c371108.jpeg https://dev.to/qausim en Yusuff, Olawumi Qauzeem Mon, 08 Jun 2020 00:54:04 +0000 https://dev.to/qausim/convert-html-inline-styles-to-a-style-object-for-react-components-2cbi https://dev.to/qausim/convert-html-inline-styles-to-a-style-object-for-react-components-2cbi <p>I once found myself having to copy some HTML elements and convert into JSX. The elements were accompanied with inline styles that React was evidently not happy with 😡.</p> <div class="ltag_gist-liquid-tag"> </div> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fpynkovw8usg1kt68z19l.PNG" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fpynkovw8usg1kt68z19l.PNG" alt="JSX with inline style string attribute error"></a></p> Erm... React is not happy with this 😒 <p>React expects an object, with property names unhyphenated but in camel case, to be passed into the style attribute. I could do it manually but it gets boring and error prone with time. So I decided to write a Javascript function that automates the conversion.</p> <div class="ltag_gist-liquid-tag"> </div> Main function is "getStyleObjectFromString" while "formatStringToCamelCase" is a helper function. <p>Given a string <code>"display: flex; flex-direction: column; align-items: center; -webkit-align-items: center"</code> passed into <code>getStyleObjectFromString</code> as an argument, an empty object literal is created. On line 15 the string is split around all semicolons resulting in an array of strings ```["display:<br> <br> flex", "flex-direction: column", "align-items: center", "-webkit-align-items: center", ""]<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> The array of string is then looped over using the Array's `forEach` method. `forEach` takes a callback function that receives each element of the array per iteration as argument. Our callback function splits each element around the colon (":"), separating the CSS property name and value. It assigns these to `property` and `value` variable names. Given `"display: flex"`, property will equal `"display"` while value equals `" flex"`. Given an empty string (the last element in the array), property will equal `""` while value equals `undefined` (both falsy values). On line 17, the function returns if `property` is falsy. On line 19, the trimmed property name - cuz "edge cases" :wink: - is passed into `formatStringToCamelCase` which splits the string parameter around every occurence of an hyphen ("-") then changes the first letter in every other word besides the first to an uppercase letter. It then joins every word together. If `"align-items"` was passed, this operation will give `"alignItems"`. The result from `formatStringToCamelCase` is our property name, in the right format, to be used in our style object to point to the trimmed `value` string. At the end of the day, `"display: flex; flex-direction: column; align-items: center; align-items: center; -webkit-align-items: center"` gives `{ display: "flex", flexDirection: "column", alignItems: "center", WebkitAlignItems: "center" }`. You can check out the demo on [Code Sandbox](https://codesandbox.io/s/react-inline-css-to-style-object-drc0r) </code></pre> </div> react javascript webdev