Suppose you have a hierarchy of components, where you pass props from a top component, and you need to pass those props unaltered to a children. It happens many times, and you don’t really want to do like this:

const IntermediateComponent = (props) => {
  return (
    <ChildComponent prop1={props.prop1} prop2={props.prop2} />
  )
}

instead, you want to pass all the props, regardless of their name.

You can do so with the spread operator:

const IntermediateComponent = (props) => {
  return (
    <ChildComponent {...props} />
  )
}

This syntax is much easier to the eye, much less error prone, and it allows flexibility, since you don’t need to change the props names or add props in the intermediate component when you change them.

Lessons in this unit:

0:	Introduction
1:	Setting up a React project with Vite
2:	React Components
3:	Introduction to JSX
4:	Using JSX to compose UI
5:	The difference between JSX and HTML
6:	Embedding JavaScript in JSX
7:	Handling user events
8:	Install the React Developer Tools
9:	Getting started with JSX
10:	How to return multiple elements in JSX
11:	How to learn React
12:	Should you use jQuery or React?
13:	React concepts: declarative
14:	The Virtual DOM
15:	The roadmap to learn React
16:	What’s new in React 19
17:	How to install React
18:	The React Fragment
19:	▶︎ React, how to transfer props to child components
20:	React PropTypes
21:	React DOM events on components
22:	How to pass a parameter to event handlers in React