Tutorial

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

Published on July 16, 2019
Default avatar

By William Le

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
William Le

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel