// Tutorial //

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

Published on July 16, 2019
Default avatar
By William Le
Developer and author at DigitalOcean.
Back to Basic: What are Props in React and How to They Work?

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking 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”.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment