Attributes

Since we are combining HTML code with JavaScript, you might have a question about how we will add styling or attributes to the HTML tags. React has a solution for that. We will learn that in this topic.

Let’s take a look at the following code which is a plain HTML tag:

<img src="https://unsplash.com/photos/ouI5Z4Ixvtk" class="curved-image" style="height: 100px; width:100px; border-radius: 20px"/>

• In the above piece of code, we see that we have styling along with class names. If this piece of code were to be converted to a JSX tag then it would have to go through some changes in attributes such as:
  • The class attribute will change to className because the class is a reserved keyword in Javascript.
  • Styles like border-radius will be converted to camelcase-like borderRadius because these become object keys.
  • Styles can be added to the JSX tag by enclosing all the styles in an object where the key is a style attribute converted to camel case and the value is the corresponding value.
• So the above code in JSX would look like this:

<img  src="https://unsplash.com/photos/ouI5Z4Ixvtk" className="curved-image" style={{  height: “100px”,  Width:”100px”,  borderRadius: “20px" }}/>