Props and Styling

The props object

Every React element has a props object. For elements representing HTML tags, this is just an object containing DOM properties.

For example, if you want to render this HTML using ReactDOM.render():

<a id="home" href="https://frontarm.com/">Frontend Armory</a>

Then you’ll need to pass in an element whose props contain one entry for each of the <a> tag’s attributes:

main.js
styles.css
index.html
New
Build In Progress

Simple, right? There’s just one problem:

Not all HTML attributes map directly to props.

Prop naming

When creating React elements, your props need to be named after DOM properties – not HTML attributes. If you’re familiar with the DOM, this shouldn’t be a problem. If not, check out the article HTML attributes vs. DOM properties.

There’s a few of these naming differences you’ll come across rather frequently:

  • Instead of class, you must use the className prop to set CSS classes
  • Instead of a for attribute on your <label> elements, you must use a htmlFor prop
  • Instead of passing a string for style, you must use an object with camelCased names
  • Instead of tabindex, you’ll need to use a tabIndex prop (note the capitalization)

Remembering these differences can be a bit of a pain. But unless you’re building rockets or medical devices, trial and error probably won’t hurt. And as a bonus, memorizing these differences will help you even outside of the React ecosystem!

Styling

Styling a React element is as simple as passing in className and/or style props.

But which one should you use?

Actually, either is fine. There are times you can’t beat the convenience of adding a short style prop. And there are times when you’ll use className to access the extra power provided by CSS.

In fact, there’s nothing wrong with mixing and matching style and className, like in this demo. You can get a feel for how each works by changing the background and border colors.

Limitations of style prop

If you want to use selectors, including pseudo-selectors like :hover, then you’ll need to use className.

main.js
styles.css
index.html
New
Build In Progress

Let’s style the contact list

Now that you’re a pro on style, it’s time to put your knowledge to use. So let’s pretty up the contact list from earlier.

For this exercise, I recommend that you use CSS with className props. I’ve added a stylesheet and a corresponding <link> tag to the HTML for you.

Your task is to make the contact list look something like this:

Contacts

JN
James Nelsonjames@frontarm.com

It’s ok if it doesn’t match exactly - the important part is to get used to the className prop, and to have fun!

main.js
styles.css
index.html
New
Build In Progress

If you’ve given the exercise a decent crack, and would like to check your answer against mine, then go ahead! Just click the Solution button at the bottom of the editor.

And once you’re ready to continue, we’ll learn how to build a list from real data.

Mark as completed and progress to next section.