Previous
Written by: rJTutorial Team | Last Updated:

React Props

  • In React, "props" is a shorthand for "properties." They serve as the primary mechanism for making your components dynamic and reusable.
  • Props are a way to pass data from a parent component down to a child component, following a "top-down" or "unidirectional" data flow.

Think of props like arguments passed into a JavaScript function. Just as you pass parameters to a function to change its output, you pass props to a React component to change what it renders on the screen.

Developer Tip: Props are read-only (immutable). A component should never modify its own props; it should only read them and render UI based on their values.

Passing Props to Functional Components

In functional components, props are passed as a single object argument to the function. While you can name this argument anything, the convention is to call it props.

import React from 'react';

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

In modern React development, it is very common to use destructuring to pull specific values out of the props object immediately. This makes the code much cleaner and easier to read.

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};
Best Practice: Use destructuring in your function signature. It clearly signals to other developers which props the component expects to receive.

Passing Props to Class Components

In class components, you don't receive props as a function argument. Instead, React automatically attaches them to the component instance, allowing you to access them via `this.props.`

import React, { Component } from 'react';

class GreetingClass extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
Watch Out: If you use a constructor in your class component, you must pass props to super(props), otherwise this.props will be undefined inside the constructor.

Default Props

Sometimes you want a component to have a fallback value if a prop isn't provided by the parent. You can set default values for props using `defaultProps.`

import React from 'react';

const GreetingWithDefault = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

GreetingWithDefault.defaultProps = {
  name: 'Guest'
};
Developer Tip: In modern functional components, you can also set defaults directly in the destructuring assignment: const Greeting = ({ name = 'Guest' }) => .... This is often preferred over the defaultProps property.

Children Props

The children prop is a special prop that is automatically passed to every component. it represents the content placed between the opening and closing tags of a component.

import React from 'react';

const Card = (props) => {
  return (
    <div className="card">
      {props.children}
    </div>
  );
};

// Usage:
// <Card>
//   <h2>Title</h2>
//   <p>This is passed as a child!</p>
// </Card>
Best Practice: Use props.children to create "Wrapper" or "Layout" components, like Modals, Sidebars, or Containers, to keep your UI consistent.

Props in Action

Here is a real-world example of how a Parent component manages data and passes it down to a Child component for display.

// Parent Component (The Data Source)
import React from 'react';
import UserProfile from './UserProfile';

const App = () => {
  const userData = {
    username: "DevMaster99",
    status: "Online"
  };

  return (
    <div>
      <UserProfile name={userData.username} status={userData.status} />
    </div>
  );
};

// Child Component (The UI Presenter)
const UserProfile = ({ name, status }) => {
  return (
    <div className="profile-box">
      <h3>User: {name}</h3>
      <p>Current Status: {status}</p>
    </div>
  );
};
Common Mistake: Forgetting that props are JavaScript values. If you are passing anything other than a string, you must wrap it in curly braces. For example: <Component age={25} isMember={true} />.

 

Summary

Understanding how to use and pass props is crucial for creating dynamic and reusable components in React. Whether you are using modern functional components or legacy class components, props provide the essential communication bridge between different parts of your application. Master them, and you'll find it much easier to build scalable, component-based user interfaces.

Previous