Table of Contents
URL: https://www.progressiverobot.com/react-props/
If you're already familiar with how arguments & functions work in JavaScript, understanding <^>props<^> is a piece of cake! In a nutshell, props are used to pass data from a parent component to a child component in React and they are the main mechanism for component communication. So in essence, props are a major part of what allows the React component pattern to work.
Like most great inventions there's always a simple core idea that holds everything together. In React, it's arguably the <^>props<^> system that allows you to treat React components just like JavaScript functions.
Props === Function Parameters
What would you say if I told you that you already know what "props" are? Well, if you know JavaScript… You do! 😜
Consider this vanilla JavaScript function:
function Greeter(name) {
return 'hello ' +name;
}
It has a single parameter called name. Passing different arguments to the parameter yields different results:
Greeter('world')
// --> "hello world"
Greeter('dolly')
// --> "hello dolly"
Greeter('its me')
// --> "hello its me"
How does this relate to React?
You can think of a React component as essentially a JavaScript function. Let's create a React component to illustrate this point:
function Greeter(props) {
return <p>hello {props.name}</p>
};
And invoking the <Greeter/> component…
function App() {
return (
<div>
<h1>HELLO APP</h1>
<Greeter name="world"/> {/* 💥 "world" is the prop value*/}
</div>
)
};
You just passed a prop value to <Greeter/> and now the Greeter component will have access to the value of the name prop! That, in a nutshell, is all <^>props<^> are! Instead of invoking Greeter like this:
Greeter('some value');
// --> "some value"
You invoke it with this HTML-esque syntax called JSX:
<Greeter name="some value"/>
// --> <p>hello some value</p>
And Greeter gets access to the props passed to it like so:
import React from 'react';
function Greeter(props) {
return (
<p>hello {props.name}</p>
)
}
export default Greeter;
This syntax of passing props in React is from the HTML world where attributes are used to bestow certain "properties" to an HTML element… Hence the abbreviated word <^>props<^> 🤯
So far, we've only used strings but <^>props<^> can take any native JavaScript type (eg., arrays, boolean values, object literals, functions).
—
As a newcomer to React, you may be tempted to think of <^>props<^> as something totally new and strange. Instead try thinking of them simply as arguments that you're supplying to a function… because at its core that's all they are.
📝 See the official React docs to learn more about "props".
