Props

#description

In React, props is a shorthand for "properties" and it's a way to pass data from one component to another. Props are passed in a unidirectional flow - from parent to child components.

When you create a parent component, you can pass data to its child components through props (short for ‘properties’). defaultProps can be used to define default values for props that are not defined.

For example, let's say we have a parent component called "App" and a child component called "Header".

We can pass data from the parent component to the child component through props like this:

                    
import React from 'react';
import Header from './Header';

function App() {
  const name = 'John';
  return (
    <div>
      <Header name={name} />
    </div>
  );
}

export default App;

And in the child component, we can access the prop through the props object like this:

                    
import React from 'react';

function Header(props) {
  return (
    <div>
      <h1>Hello, {props.name}.</h1>
    </div>
  );
}

export default Header;

In this example, we're passing the "name" prop from the parent component "App" to the child component "Header". And in the child component, we're accessing the "name" prop through the "props" object.

Overall, props allow us to create reusable components by passing data from one component to another in a unidirectional flow.

March 25, 2023

If you don't quite understand a paragraph in the lecture, just click on it and you can ask questions about it.

If you don't understand the whole question, click on the buttons below to get a new version of the explanation, practical examples, or to critique the question itself.

Developer learning path

Props in React

Props