Whenever you have a system that is reliant upon composition, it's critical that each piece of that system has an interface for accepting data from outside of itself. You can see this clearly illustrated by looking at something you're already familiar with, functions.
function getProfilePic (username) {return 'https://photo.fb.com/' + username}function getProfileLink (username) {return 'https://www.fb.com/' + username}function getAvatarInfo (username) {return {pic: getProfilePic(username),link: getProfileLink(username)}}getAvatarInfo('tylermcginnis')
We've seen this code before as our very soft introduction to function composition. Without the ability to pass data, in this case username
, to each of our of functions, our composition would break down.
Similarly, because React relies heavily on composition, there needs to exist a way to pass data into components. This brings us to our next important React concept, props
.
Props are to components what arguments are to functions.
Again, the same intuition you have about functions and passing arguments to functions can be directly applied to components and passing props to components.
There are two parts to understanding how props work. First is how to pass data into components, and second is accessing the data once it's been passed in.
Passing data to a component
This one should feel natural because you've been doing something similar ever since you learned HTML. You pass data to a React component the same way you'd set an attribute on an HTML element.
<img src='' /><Hello name='Tyler' />
In the example above, we're passing in a name
prop to the Hello
component.
Accessing props
Now the next question is, how do you access the props that are being passed to a component? In a class component, you can get access to props from the props
key on the component's instance (this
).
class Hello extends React.Component {render() {return (<h1>Hello, {this.props.name}</h1>)}}
Each prop that is passed to a component is added as a key on this.props
. If no props are passed to a component, this.props
will be an empty object.
class Hello extends React.Component {render() {return (<h1>Hello, {this.props.first} {this.props.last}</h1>)}}<Hello first='Tyler' last='McGinnis' />
It's important to note that we're not limited to what we can pass as props to components. Just like we can pass functions as arguments to other functions, we're also able to pass components (or really anything we want) as props to other components.
<Profileusername='tylermcginnis'authed={true}logout={() => handleLogout()}header={<h1>👋</h1>}/>
If you pass a prop without a value, that value will be set to true
. These are equivalent.
<Profile authed={true} /><Profile authed />
Before you leave
I know, "another newsletter pitch" - but hear me out. Most JavaScript newsletters are terrible. When's the last time you actually looked forward to getting one? Even worse, when's the last time you actually read one rather than just skim it?
We wanted to change that, which is why we created Bytes. The goal was to create a JavaScript newsletter that was both educational and entertaining. 97,470 subscribers and an almost 50% weekly open rate later, it looks like we did it.
Delivered to 97,470 developers every Monday

Sdu
@sduduzo_g
This is the first ever newsletter that I open a music playlist for and maximize my browser window just to read it in peace. Kudos to @uidotdev for great weekly content.

Brandon Bayer
@flybayer
The Bytes newsletter is a work of art! It's the only dev newsletter I'm subscribed too. They somehow take semi boring stuff and infuse it with just the right amount of comedy to make you chuckle.

John Hawley
@johnhawly
Bytes has been my favorite newsletter since its inception. It's my favorite thing I look forward to on Mondays. Goes great with a hot cup of coffee!

Garrett Green
@garrettgreen
I subscribe to A LOT of dev (especially JS/TS/Node) newsletters and Bytes by @uidotdev is always such a welcomed, enjoyable change of pace to most (funny, lighthearted, etc) but still comprehensive/useful.

Muhammad
@mhashim6_
Literally the only newsletter I’m waiting for every week.

Grayson Hicks
@graysonhicks
Bytes is the developer newsletter I most look forward to each week. Great balance of content and context! Thanks @uidotdev.

Mitchell Wright
@mitchellbwright
I know I've said it before, but @tylermcginnis doesn't miss with the Bytes email. If you're a developer, you really need to subscribe

Ali Spittel
@aspittel
Can I just say that I giggle every time I get the @uidotdev email each week? You should definitely subscribe.

Chris Finn
@thefinnomenon
Every JavaScript programmer should be subscribed to the newsletter from @uidotdev. Not only do they manage to succinctly cover the hot news in the JavaScript world for the week but it they manage to add a refreshing humor to it all.