InterviewVault
Welcome back, Sujit Kumar Mishra
Admin
SK Mishra
Revision Mode
Document technical questions and best-practice answers.
What are props in ReactJS?
Props in ReactJS are like special containers used to pass data from one component to another.
1: Think of props as "arguments" you send to a function, but here you send them to a component.
2: They help make components reusable by allowing you to give different data to each one.
3: Props are read-only, which means a component can use them, but cannot change them.
In short:
Props are a way to send information from parent to child components in React.
Example 1: Passing a Name as a Prop
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Using the component and passing "John" as a prop
<Welcome name="John" />
Example 2: Passing Multiple Props
function UserInfo(props) {
return <p>{props.name} is {props.age} years old.</p>;
}
// Using the component and passing two props
<UserInfo name="Alice" age={25} />
Example 3: Passing a Function as a Prop
function Button(props) {
return <button onClick={props.onClick}>Click me</button>;
}
function handleClick() {
alert("Button was clicked!");
}
// Using the component and passing a function as a prop
<Button onClick={handleClick} />
Summary:
Props help you send data (like text, numbers, or even functions) from one component to another, making your components flexible and reusable.