what are props?

Back to: React

Props stands for properties. Props are arguments passed into React components. Props are passed to components via HTML attributes.

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:

add a brand attribute to the car element
const myElement = <Car brand="Ford" />;

The component received the argument as a props object.

use the brand attribute in a component
function Car(props) {
    return <h2>I am a { props.brand }!</h2>;
}

pass data

Props are also how you pass data from one component to another, as parameters:

Send the brand property from the Garage component to the Car component
function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

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

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