Props to JSX

In my previous post, I focused on two basic concepts about React: its use as a Javascript library for building user interfaces and the basic structure through which it accomplishes this task: components.

We also saw how to get our first React app up and running, while paying attention to how this basic starter app utilizes React’s capabilities in order to work its magic communicate with the DOM and render said components.

Part of this process involved noticing the peculiar syntax used to write such apps, known as JSX. We will continue learning about these features in this post.

We will explore one of the two most commonly-used features to take advantage of the way in which components communicate with each other: props.

Without further ado – to the example!

Let's first clear out the default filler code from App.js and create our own bit of code – a Box component:

I suppose that it’s not really a 'Box' if it only has two dimensions…however, for some reason, 'Box' sounded better than 'Rectangle'. But I digress…

Notice the div className = "App"is still the outermost element being returned. React dictates that all elements being returned must be enclosed within a single outermost tag (for example, if I wanted to have two div s, I would have to include them both in a single outer div to be returned by render()). And what do we have inside of the App div? Another component - Box className= "Box" /. And in place of the React filler, we now find a simple box being displayed on the page.

As a component, Box has its own separate file - Box.js, which needed to be created and needs to be imported to App.js (notice the import statement on the third line). So that's how App knows about Box (just like ReactDOM had to import App in the explanation in the last post). Let’s take a look at what Box entails:

Not much to see here, either - just a simple function returning a single div ! The return statement is quite similar to App ; however, this return statement is part of the function itself, rather than being part of the render() method of a Class, as App is. The div itself has a className = "Box" property – this is the JSX way of connecting CSS styling. className produces the same result as class in vanilla Javascript, and it avoids causing name conflicts when all files are bundled with Webpack or the like. This means that the .Box CSS class – as well as the .App CSS class – are responsible for how the app looks thus far. (Notice App.css being imported to both files). Here is what App.css includes currently:

Same syntax for a class: .Box gives the style for the box as displayed.
As for the Box function itself, notice the parameter: props.

props (short for ‘properties’) is a catch-all term for any properties given to a React component when it is created.

If you consider a React component in JSX as a function call, you can think of properties as the arguments being passed. For example, if we wanted to write text in the Box, we could pass our Box component a text prop, and set the value of text to an HTML-style tag containing the text we wish to display.

NOTE: In this example, an h2 tag is used rather than a simple string. This illustrates another element of JSX: any time plain Javascript is to be inserted, whether as a function or a representation of an HTML element as a string literal, it must be enclosed in curly braces { }.

Thinking of JSX component syntax as a function call would be akin to imagining the Box component as Box(). Likewise, the text prop holding the h2 element inside the Box component translates to the argument text being passed through the function, like so: Box(text). In this case, text would be a variable storing the h2 element I am a box!.

Observe:

Any time a React project file is saved, React updates in real time to reflect those changes. When we save the file, React notices that there is now a property being passed to Box, and it updates the DOM accordingly. As for how the Box component determines what to render:

In App.js, we see the text prop and value inserted within Box. In Box.js, we notice that in the div, we now have a piece of Javascript inserted ( signaled by{ } ), which gives the value of props.text. This means that Box received the props object with any props as keys and their respective values.

NOTE: While this example used a stateless, function-style component, props can also be passed to stateful and/or class components by calling a constructor, which we will see in upcoming examples.

If we console.log(props) in our Box component:

We see that this object contains a text key with a child value of "I am a box!" of type h2.

With this same procedure, we could alter the component to display an image, or pass it a function to handle events…the possibilities are endless!
Ah, the JSX syntactical sugar is sweet – turning an obscure object into such a simple result!

In the next post, we’ll explore a more complex example to see how props can be passed through multiple layers, and we'll get a better look at components in class syntax.

Until next time!

Back to Posts