Logo InterviewVault

Welcome back, Sujit Kumar Mishra

SKM

Revision Mode

Document technical questions and best-practice answers.

Cancel

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.

Ready for commit