4. Props Introduction

When placing a tag in a React component, React will either create a component if it’s a component tag, or a DOM element if it’s a standard HTML tag. (The process is a bit more than just that transpiling JSX to React elements and from there creating what it needs to create but more on that in future lessons and for the sake of simplicity we will ignore that for now.) When placing the tag you can pass data to the React component or the DOM element. We call the passing of data from parent to child as “props”.

We will have 2 lessons about props:

• In this lesson we will learn about passing props to those familiar DOM elements like <img>.
• In the next lesson we will learn about passing props to React components.

Let’s start with common cases of passing props to familiar HTML tags.

How do I know which props I can pass?

The props you can pass are the same javaScript properties that the DOM element has. For example the <img> tag has properties like src, width, and height. You can find the full list of properties for each HTML tag in the MDN documentation.

If you are using TypeScript, which we will learn how to work with TypeScript and React later in this course, you will have good IDE support and good autocomplete for the props you can pass to the HTML tags.

Another trick you can use is to grab the element in the browser developer tools, go to the console tab, and type $0. The $0 variable is a reference to the currently selected DOM element, and you can inspect its properties and methods. This will give you a good idea of what properties you can pass to the element.

In the following simple example we are creating a component that is placing an image on the screen. React will create an image dom element. And we will pass the src, width, and height properties to the image element.

export default function App() {
return (
	<img 
	  src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg"
		height="300"
		width="300"
	/>
)
}

Open Sandbox

You can try and play with this online IDE and pass props to the image element.

You will notice that the src, width, and height properties are set to the values we passed in the component. And this behavior is very similar to how the browser transforms HTML to DOM elements.

This means that props that are passed to a familiar HTML tag will be passed to the corresponding DOM element, helping React generate the DOM element with the correct properties.

Prop Types

The type of the props, rather it’s a string, number, object, etc. should match what the prop expects to receive. Setting the prop to undefined means that the prop is not set, and it will not be passed to the DOM element. Passing a string is straightforward, in this example we are passing a string to the src prop of the <img> tag.

<img
  src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg"
/>

this means that passing a string is simply placing the value after the = sign, wrapped in quotes ".

For other types we are placing the value after the = sign and wrapped with {}. In the following example we are passing a number to the width and height props of the <img> tag.

<img
  src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg"
  width={300}
  height={300}
/>

The width and height can also accept a string value that can be transformed to a number, like "300" or "300px".

You can tell the type of the prop by looking at the MDN documentation for the HTML tag. If you are using TypeScript, you will have good IDE support and good autocomplete for the props you can pass to the HTML tags as well as information about the types that each prop is expecting.

JavaScript Reserved words

When passing props to the DOM elements, the props that you can pass are based on the properties of the DOM element. This means that the props should match the properties of the DOM element, which are in JavaScript convention. Properties in JavaScript are camelCased, while HTML attributes are kebab-cased. In addition, it is not common to use reserved words in JavaScript as property names. For example, the class attribute in HTML is a reserved word in JavaScript Another example is the for attribute in HTML, which is a reserved word in JavaScript.

class vs className

Up until this point we said that the component describes the UI with a syntax that looks like HTML, but it’s not HTML - it is JSX. It can be confusing but the props should match the DOM element properties and not the HTML attributes.

A common example is the class attribute in HTML. In HTML, we use the class attribute to set CSS classes on an element. In JSX, we use the className prop to set CSS classes on an element. This is because class is a reserved keyword in JavaScript, so there is no class in the DOM element. The class HTML attribute is mapped to the className property in the DOM element. So in our example, if we want to pass prop of css class we do that under the prop name className and not class.

<img
  src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg"
  width={300}
  height={300}
  className="my-image-class"
/>

for vs htmlFor

Another common example is the for attribute in HTML. In HTML, we use the for attribute to associate a label with an input element. In JSX, we use the htmlFor prop to associate a label with an input element. This is because for is a reserved keyword in JavaScript, so there is no for in the DOM element. The for HTML attribute is mapped to the htmlFor property in the DOM element. So in our example, if we want to pass prop of for we do that under the prop name htmlFor and not for.

<label htmlFor="my-input">My Input</label>
<input id="my-input" type="text" />

Events

Each DOM element has a set of events that you can listen to. For example, the <img> tag has an onClick event that you can listen to. You can pass a function to the onClick prop, and it will be called when the image is clicked.

In the following example, we are passing a function to the onClick prop of the <img> tag. When the image is clicked, the function will be called and it will log a message to the console.

<img
  src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg"
  width={300}
  height={300}
  onClick={() => console.log('Image clicked!')}
/>

Caution

Unlike HTML where there is onclick attribute, in React we use the onClick prop. Note that the onClick prop is camelCased, while the HTML attribute is lowercase. In general the props passed match the DOM element properties, which are in JS convention and are camelCased.

style

As mentioned each prop should get the type it expects, according to the MDN documentation. let’s examine another prop called style. The style prop on the DOM element is of type CSSStyleDeclaration, which is an object that contains the styles for the element. It is a read only property, meaning you cannot set it directly. what you can do is set properties on that style object. For example, you can set the backgroundColor property to change the background color of the element. For example let’s examine the following HTML

<img
  src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg"
  width="300"
  height="300"
  style="background-color: red;"
  id="my-image"
/>

<script>
  const img = document.getElementById('my-image');
  img.style.backgroundColor = 'blue';
</script>

Notice that this is an HTML and not JSX in a React component. In this example we will create an image element with a red background color. Then we will grab the image element by its id and change the background color to blue.

Notice that the image dom element has a style property, which is read only, which means you cannot set it directly.

<script>
  const img = document.getElementById('my-image');
  // this does nothing
  img.style = { backgroundColor: 'blue' };
</script>

You can however set properties on the style object, like backgroundColor, which is a property of the CSSStyleDeclaration object. Like we did here:

<script>
  const img = document.getElementById('my-image');
  img.style.backgroundColor = 'blue';
</script>

Another difference is that in HTML we use kebab-case for the CSS properties, like background-color, while in the style prop in React we use camelCase, like backgroundColor. Since React is oriented towards JavaScript, it uses the JavaScript convention of camelCase for property names. In addition although the style prop is read only React is giving us a way to set the styles on the element by passing an object to the style prop.

For example in the following React component we are passing an object to the style prop of the <img> tag.

export default function App() {
  return (
    <img
      src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg"
      width={300}
      height={300}
      style={{ backgroundColor: 'red' }}
    />
  )
}

The style prop is expecting an object, notice that we have double curly braces {{ }}. The outer curly braces are for the JSX syntax, and the inner curly braces are for passing the object. Notice that the backgroundColor property is in camelCase, as we are passing a JavaScript object. You can pass any CSS property to the style prop, and it will be applied to the element.

Tip

It is common to work with styling libraries like styled-components or tailwindcss that allow you to style your components in a more convenient way, and avoiding css duplication.

Summary

In this lesson we learned about passing props to familiar HTML tags like <img>, and <button>. We learned that props are passed to the DOM element, and that the props should match the properties of the DOM element. The DOM element properties are camel cased and so the props should be camelCased as well. We do not use reserved words in JavaScript as property names, so we use className instead of class, and htmlFor instead of for. We should also pay attention to the type of the prop we are passing, and pass the correct type according to the MDN documentation. If we are passing a string we can directly place the value after the = sign, wrapped in quotes. If we are passing a number or an object, we should place the value after the = sign and wrapped with {}. In general the {} syntax is used to pass JavaScript expressions in JSX. We used the style prop to pass an object with styles to the element, and we learned that the style prop is read only, but we can set properties on the style object. In the next lesson we will learn about passing props to React components, and how to create our own components that accept props.