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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.