React Props

Props are arguments passed into React components.

Props are passed to components via HTML attributes.

Note: props stands for properties.

React Props

React Props are like function arguments in JavaScript and attributes in HTML.

To send props into a component, use the same syntax as HTML attributes:

Example

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" />
);

The component receives the argument as a props object:

Example

function Car(props) {
  return (
    <h2>I am a {props.brand}!</h2>
  );
}

The name of the object is props, but you can call it anything you want.

Example

function Car(myobj) {
  return (
    <h2>I am a {myobj.brand}!</h2>
  );
}

Pass Multiple Properties

You can send as many properties as you want.

Every attribute is sent to the Car component as object properties.

Example

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" model="Mustang" color="red" />
);

All properties are received in the Car component inside the props object:

Example

function Car(props) {
  return (
    <h2>I am a {props.color} {props.brand} {props.model}!</h2>
  );
}

Different Data Types

React props can be of any data type, including variables, numbers, strings, objects, arrays, and more.

Strings can be sent inside quotes as in the examples above, but numbers, variables, and objects need to be sent inside curly brackets.

Example

createRoot(document.getElementById('root')).render(
  <Car year={1969} />
);

Example

let x = "Ford";

createRoot(document.getElementById('root')).render(
  <Car brand={x} />
);

Example

let x = [1964, 1965, 1966];
let y = {name: "Ford", model: "Mustang"};

createRoot(document.getElementById('root')).render(
  <Car years={x} carinfo={y} />
);

Object Props

The component treats objects like objects, and you can use the dot notation to access the properties.

Example

function Car(props) {
  return (
    <>
      <h2>My {props.carinfo.name} {props.carinfo.model}!</h2>
      <p>It is {props.carinfo.color} and it is from {props.carinfo.year}!</p>
    </>
  );
}

const carInfo = {
  name: "Ford",
  model: "Mustang",
  color: "red",
  year: 1969
};

createRoot(document.getElementById('root')).render(
  <Car carinfo={carInfo} />
);

Array Props

Array props can be accessed using the indexes.

Example

function Car(props) {
  return (
    <h2>My car is a {props.carinfo[0]} {props.carinfo[1]}!</h2>
  );
}

const carInfo = ["Ford", "Mustang"];

createRoot(document.getElementById('root')).render(
  <Car carinfo={carInfo} />
);

Pass Props from Component to Component

Attributes are also how you pass data from one component to another, as parameters.

Example

function Car(props) {
  return (
    <h2>I am a {props.brand}!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand="Ford" />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

Note: React Props are read-only! You will get an error if you try to change their value.