React as a Framework Part 2: Props

If you are a little new to using the React front-end framework, hopefully by now you at least have some basic understanding on how components work, as well as how React uses the JSX extension of Javascript in order to manipulate the DOM in a more efficient and dynamic way than regular Javascript (if not, feel free to check out Part 1 of my React series here: https://medium.com/@lgonzalez_94/react-as-a-framework-part-1-jsx-and-components-a2d286a832eb ).

To review, just like how we would use regular methods/functions, components are used in React as a way to separate our code into multiple working parts that all come together to form a fully functioning web application. Through this, not only do components make our code a lot more readable and easy to follow, but they also make our code a lot more abstract, allowing us to reuse code in different situations without having to repeat ourselves so much. As we know, repeating ourselves a lot is always a big no-no when it comes to programming, so in this way, components are very useful to us!

Consider the code snippet below:

import React, { Component } from "react";
import Article from "./Article"
class App extends Component {
render() {
return (
<div>
<Article />
</div>
)
}
}
export default App

As we can see, this is an example of a pretty simple class component, called App, that renders a <div> element every time it is called. Within said <div> element, we happen to be calling an Article component only once. Let’s say this is what our Article components happens to look like:

import React, { Component } from "react";class Article extends Component {
render() {
return (
<div>
This is article number 1.
</div>
)
}
}
export default Article

Then when we actually start our React server, we should see something like this:

Since our Article component is composed of another <div> element in which the inner text is “This is article number 1,” when we take a look at the the elements currently being displayed on our web page, we can see that exact <div> element clearly being rendered. Pretty simple so far! But what if we had multiple articles that we wanted to render onto the page like below?

Hypothetically speaking, since every article is different, we could create a distinct Article component for each line, respectively. However, once you start working with more complex code, you can see how doing such a thing would quickly become very tedious and repetitive, something that we as programmers definitely don’t want to happen. That’s where abstraction via props comes in!

Props

In React, props are what allows us to pass data into our components. Just like data can literally be anything from strings to integers to objects, or even functions, we can pass any number of those things into components to be used within them. Through this, props can be thought of as very similar to arguments being passed into a method — in such situations, usually the code within the method is always the same, and with the addition of arguments, that data can be used to slightly alter what is being returned without having to write the same logic over and over again. The same concept applies to components — with props, we can call the same component, with the same exact code, multiple times and still get a different result.

For simplicity’s sake, we can see in the example above that every article’s text is exactly the same except for the number. Thus, we can determine that the number is what should be passed in as a prop. Here’s how it’s done:

import React, { Component } from "react";
import Article from "./Article"
class App extends Component {
render() {
return (
<div>
<Article number={1} />
</div>
)
}
}
export default App

In the example above, we have the same App component displayed at the very beginning of this blog, only with a slight change: we added “number={1}” within our Article component tag. That is our prop!

As we can see, it actually looks very similar to how one would pass in attributes like a className, for example, into a JSX tag. The “number” simply refers to the name of the prop that we would like to have access to (similar to a variable name) and this name can be pretty much anything we chose it be. Once we define the name of the prop, like such, we just add an equal sign and JSX curly braces to determine what the prop value will be, and just like I mentioned earlier, this value can literally be any kind of data — in this case, it is simply an integer of 1. Through this, we can now access that prop within the Article component itself like so:

class Article extends Component {
render() {
return (
<div>
This is article number {this.props.number}.
</div>
)
}
}
export default Article

In order to access the prop after we pass it into a component, we include some more JSX curly braces wherever we want our prop value to be displayed, and we just call “this.props” in order to tell React that we want to access the props currently available to that component. Once we do that, we add a “.number” to refer to the specific prop of “number,” and voila, the result we get is exactly the same as our first example output!

And now, if we wanted to display multiple articles with just a different number, we can easily do something like this:

class App extends Component {
render() {
return (
<div>
<Article number={1} />
<Article number={2} />
<Article number={3} />
<Article number={4} />
<Article number={5} />
</div>
)
}
}
export default App

Or even better: if we have an array “numbers = [1,2,3,4,5]”, then within some curly braces, we can map through said array, and for each element (“num”), we can call our Article component while passing in our number prop with the value of “num” like so:

import React, { Component } from "react";
import Article from "./Article"
let numbers = [1,2,3,4,5];class App extends Component {
render() {
return (
<div>
{numbers.map(num => <Article number={num}/>)}
</div>
)
}
}
export default App

And guess what the result is:

BOOM! Through the use of props, we were finally able to reuse our Article component as many times as needed without having to make a single change within its code! In turn, we ended up with much cleaner and much more abstract code snippets than what we would have ended up with had props didn’t exist. Yet this is still just a small taste of all the possibilities React has to offer!

Please check out the conclusion of my React series (https://medium.com/@lgonzalez_94/react-as-a-framework-part-3-state-and-the-flow-of-information-55e5f70469ab) where we dive into an introduction of state and how data can even be manipulated through props!

React Documentation: https://reactjs.org/

Developer, gamer & music lover

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store