Nearby lessons
6 of 44📦 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.
React Playground
export default function App(props) { return ( <div> <h1>Hello {props.name} Age : {props.age}</h1> </div> ); }
🔢 Passing Variables as Props
To send variables instead of strings, wrap the variable in {}.
React Playground
export default function App(props) { return ( <div> <h1>Hello {props.name}</h1> </div> ); }
❌ Props are Read-Only (Immutable)
Props cannot be modified inside the component. If you try to change them, React will throw an error.
React Playground
export default function App(props) { // ❌ Direct mutation of props is not allowed in React // props.name = "John"; // This will throw an error return ( <div> <h1>Hello {props.name}</h1> </div> ); }
👶 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.
React Playground
export default function App(props) { return ( <div className="card"> <h1>Hello {props.name}</h1> <div className="children"> {props.children} </div> </div> ); }
🔗 Passing Data Between Components
Props are commonly used to pass data from one component to another.
React Playground
import React from 'react'; import Person from './Person.jsx'; export default function App() { return ( <div className="App"> <Person name="Rajesh"/> <Person name="Rohit"/> <Person name="Raj"/> </div> ); }
🧠 Test Your Knowledge
4 QuestionsProgress: 0 / 4
Keep Going!React - State