React Props

In React, "props" is short for "properties,"and it refers to a mechanism for passing data from one component to another. Props are a way to send information from a parent component to a child component.

app/page.tsx
1function Welcome(props) {
2return <h1> Hello, {props.name}! </h1>;

Inside Component

app/page.tsx
1<Welcome name="Sujan" />

Tip : Always start component names with a capital letter.

Internal React Flow

React calls the Welcome component with {name: "Sujan" } as the props

Our Welcome component returns a <h1>Hello, Sujan!</h1>element as the result

React DOM efficiently updates the DOM to match<h1>Hello, Sujan</h1>!.