React Props: Syntax, Usage, and Examples
React props (short for properties) allow components to receive data from their parent components. They make components reusable and dynamic by enabling them to display different content based on the provided values. Props are immutable, meaning a component cannot modify the props it receives.
How to Use React Props
Use props in React to pass data from a parent component to a child component. Props work like function arguments, allowing you to customize the behavior of a component based on the values passed down.
Passing Props to a Component
Declare props as function parameters in a functional component and access them inside JSX.
jsx
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
function App() {
return <Greeting name="Alice" />;
}
In this example, Greeting receives a name prop from App, making it reusable for different names.
Default Props in React
Declare default values for props using defaultProps when a parent does not provide a value.
jsx
function Welcome({ user = "Guest" }) {
return <h2>Welcome, {user}!</h2>;
}
export default Welcome;
If no user prop is passed, the component will use "Guest" as the default value.
Passing Multiple Props
Pass multiple props to a component by including them inside the JSX tag.
jsx
function UserProfile({ name, age }) {
return <p>{name} is {age} years old.</p>;
}
function App() {
return <UserProfile name="Alice" age={25} />;
}
This makes the component adaptable to different sets of data.
When to Use React Props
Props help create dynamic and reusable components. Use them when you need to:
Pass Data to Child Components
Props enable child components to receive information from their parent. This is essential for structuring applications with a clear data flow.
jsx
function Profile({ username }) {
return <p>Profile of {username}</p>;
}
function App() {
return <Profile username="Charlie" />;
}
Customize Component Behavior
Use props to configure a component’s behavior without modifying its implementation.
jsx
function Button({ text, color }) {
return <button style={{ backgroundColor: color }}>{text}</button>;
}
function App() {
return <Button text="Click Me" color="blue" />;
}
Props allow a single Button component to be styled differently across an app.
Pass Functions as Props
Send functions to child components using props to enable event handling.
jsx
function ClickButton({ onClick }) {
return <button onClick={onClick}>Click me</button>;
}
function App() {
const handleClick = () => alert("Button clicked!");
return <ClickButton onClick={handleClick} />;
}
This approach keeps logic in the parent while allowing the child to trigger actions.
Examples of React Props
Props are fundamental in React development. Here are some common examples:
Rendering Lists with Props
Use props to pass dynamic lists to a component.
jsx
function UserList({ users }) {
return (
<ul>
{users.map((user) => (
<li key={user}>{user}</li>
))}
</ul>
);
}
function App() {
const users = ["Alice", "Bob", "Charlie"];
return <UserList users={users} />;
}
Conditional Rendering with Props
Change UI output based on props.
jsx
function Status({ isLoggedIn }) {
return isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>;
}
function App() {
return <Status isLoggedIn={true} />;
}
Handling Props in Forms
Pass values and event handlers to form components.
jsx
function InputField({ label, value, onChange }) {
return (
<div>
<label>{label}</label>
<input type="text" value={value} onChange={onChange} />
</div>
);
}
function App() {
const [name, setName] = React.useState("");
return <InputField label="Name" value={name} onChange={(e) => setName(e.target.value)} />;
}
Learn More About React Props
React Props vs. State
Props and state both control how a component behaves, but they serve different purposes:
- Props are passed from parent to child and cannot be modified by the child.
- State is managed within a component and can be updated using
useState.
jsx
function Counter() {
const [count, setCount] = React.useState(0);
return <p>Count: {count}</p>;
}
Use state for component-specific data and props for passing information between components.
Props Drilling and Context API
Passing props multiple levels down the component tree is called props drilling. When too many components need access to the same data, React Context API is a better solution.
jsx
const ThemeContext = React.createContext();
function ThemedButton() {
const theme = React.useContext(ThemeContext);
return <button style={{ backgroundColor: theme }}>Click me</button>;
}
function App() {
return (
<ThemeContext.Provider value="lightblue">
<ThemedButton />
</ThemeContext.Provider>
);
}
Context API eliminates the need to pass props manually through intermediate components.
Passing Boolean Values in Props
For boolean props, pass them without an explicit value or set them to true or false.
jsx
function Alert({ isActive }) {
return isActive ? <p>Alert is active!</p> : <p>No alerts.</p>;
}
function App() {
return <Alert isActive />;
}
If isActive is included, it defaults to true.
Passing State as Props
Send state from one component to another using props.
jsx
function Display({ message }) {
return <p>{message}</p>;
}
function App() {
const [text, setText] = React.useState("Hello World");
return <Display message={text} />;
}
This technique lets one component control data while another displays it.
Looking to dive deeper into React props and other essential React concepts? Check out our React course.