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

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 🤯

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.