Tutorial

Back to Basic: What are Props in React and How to They Work?

React

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

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”.

0 Comments

Creative Commons License