Nearby lessons

6 of 43

📦 ReactJS – Props

📌 What are Props in React?

  • Props stands for properties.
  • Props are arguments passed into React components.
  • Props are passed to components via HTML attributes.
  • Props are similar to function arguments in JavaScript and attributes in HTML.
  • Props are read-only and cannot be modified.

⚙️ Passing Props as HTML attributes

To send props into a component, use the same syntax as HTML attributes.
Example02
Loading editor…

🔢 Passing Variables as Props

To send variables instead of strings, wrap the variable in {}.

Example03
Loading editor…

❌ Props are Read-Only (Immutable)

Props cannot be modified inside the component. If you try to change them, React will throw an error.

Example04
Loading editor…

👶 Children Props

Props can also be used to pass children elements between component tags.

props.name prints the name.

props.children prints anything inside the component’s opening and closing tags.

Example05
Loading editor…

🔗 Passing Data Between Components

Props are commonly used to pass data from one component to another.

Example06
Loading editor…

🧠 Test Your Knowledge

4 Questions
Progress: 0 / 4