How To Pass Props In React (Simple Tutorial)

To pass props to a react component add an attribute with a value to the component

In this video I will explain how to pass props to a child component in React:

How to pass props in React?

In this example I will show you how to create a prop name with value "New Button". This value will be stored in component's state object under text name. (Where text is component's state variable created with useState hook. But you can pass regular const or let values as props as well. It's just more proper to use state variables, especially in an example.)

To pass props to a React component, follow these steps:

1. Create component and nest it in parent component.
2. In parent component create a state variable text using useState hook.
3. Pass value of this variable into child component using attribute name.

For example to pass multiple props name, number and anotherProp, add them to component as attributes:

<Button name = {text}
        number = {1}
 anotherProp = {"Something Else"} />

React component prop values are always wrapped in {brackets}, not quotes.

To pass a string into a prop, you have to add quotes inside the brackets.

But you can also use backtick quotes to form more complex strings:

<Button complexString = {`Something Else and a ${number}`} />

Here is complete sample code demonstrating how to pass props into a React component:

import { useState } from 'react'

const Button = props => {
  const {name, number} = props;
  return(<button>{name}{number}</button>)
}

function App() {
  const [text, setText] = useState("New Button")
  return (
    <div className = "App">
      <Button name = {text} number = {1} />
    </div>
  )
}

export default App;

Here multiple props name and number were passed into Button component by attribute name. Inside the Button component, you can use props argument to access the passed props.

What type of data can be passed as a prop?

Props don't have to be values of state variables. The prop number here is a primitive numeric value.

You can pass primitives, strings, functions or any other object as a prop.

But to pass a function or an event as a prop you must be careful.

How to pass functions to props?

It is possible to pass a function as a prop to child component, and then call it from that component as a regular function. This is because functions are also objects in JavaScript, like any other data type.

But the most common case of passing functions as a prop, is when defining component's event callbacks. like onClick on a button or div element, or text input component's onChange event.

Technically, events like onClick and onChange are not props. They are built-in component events that work in exactly the same way as their JavaScript equivalents.

But because events are passed in the same way as props (using component attribute names,) it's worth talking about here, to avoid confusion.

See next section for an explanation.

How to pass event functions as props (onClick, onChange, etc)?

Functions can be defined to have no arguments, or one or more arguments.

To pass a function without arguments, use function's name without parenthesis:

<Button someFunction = {myFunc}>

For the most part, however, you'll probably be passing functions to events, that look like props.

In this case functions become event handlers.

Here is an example of an onClick event handler function on a button component:

function App() {
  const [text, setText] = useState("New Button")
  const clickMe = () => { console.log("I was clicked.") }
  return (
    <div className = "App">
      <button onClick = {clickMe}>Click me!
    </div>
  )
}

When the button is clicked, clickMe function will execute.

Note that the function is passed to the onClick event by name without parenthesis. This is because clickMe function doesn't require any arguments.

In React event-based function event object is assumed as the first argument, on all regular JavaScript events that have one, and you can access it inside clickMe function:

function App() {
  const clickMe = (event) => {
    console.log("I was clicked.");
    console.log("Event object is:", event)
  }
}

The event object is optional. Don't include it in argument list if it's unused in function body.

But if you need to track things like mouse click coordinates, you'll need to add it.

How to pass an event handler function ot onClick with extra arguments:

There are times, when a function needs to execute with an argument list.

In this case you want to wrap your function value in an arrow function:

<button onClick = {() => clickMe() }>Click me!

(In this case function will be returned from arrow function. But it doesn't matter, because here the arrow function is anonymous. There is no place we can pick up the return value from clickMe().

Which is the same as (function wrapped in an extra pair of brackets):

<button onClick = {() => { clickMe() }}>Click me!

In this case clickMe() will not be returned from arrow function. But again, it doesn't matter here either, because arrow function is anonymous, and used only as conduit for the event.

Here is the complete example of passing a function with arguments to onClick event:

function App() {
  const [text, setText] = useState("New Button")
  const clickMe = (args) => {
    console.log("I was clicked.");
  }
  return (
    <div className = "App">
      <button onClick = {clickMe}>Click me!
    </div>
  )
}

About the author