Introduction: Why Creating Components Using Properties Matters

One of React’s superpowers is its ability to build reusable, dynamic UI components. But what makes a component truly reusable?

The answer is props (short for properties).

Props in React allow you to create components that can be customized and reused with different data, making your codebase more efficient, maintainable, and scalable.

If you’ve ever duplicated a component just to change the text or color—this article is for you.

What Are React Props?

Props are custom inputs passed to a React component as HTML attributes. They allow you to dynamically configure the component’s behavior or appearance from outside the component.

Think of props like parameters to a JavaScript function—except they configure components!

Step-by-Step: Creating Components Using Props

✅ Step 1: Define a Functional Component That Accepts Props

You can define props either using the props object or by destructuring them:

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

Or better yet, use destructuring for clarity:

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

✅ Step 2: Use the Component with Custom Property Values

Now use the component in your parent like this:

function App() {
  return (
    <div>
      <Greeting name="Vinay" />
      <Greeting name="Ayesha" />
    </div>
  );
}

Output:

Hello, Vinay!
Hello, Ayesha!

Each Greeting component renders different content based on the value of name prop.

✅ Step 3: Pass Multiple Properties

function ProfileCard({ name, title, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{title}</p>
      <p>Age: {age}</p>
    </div>
  );
}

function App() {
  return (
    <ProfileCard name="Vinay Kumar" title="Frontend Developer" age={29} />
  );
}

You can pass strings, numbers, booleans, arrays, objects, even JSX and functions as props.

✅ Step 4: Reusing Components with Different Props

function Button({ label, color }) {
  return (
    <button style={{ backgroundColor: color }}>{label}</button>
  );
}

function App() {
  return (
    <>
      <Button label="Submit" color="green" />
      <Button label="Cancel" color="red" />
    </>
  );
}

Why this matters: Instead of making multiple SubmitButton, CancelButton, etc., you now have one flexible component.

⚙️ Complete Functional Code Example

import React from 'react';
import ReactDOM from 'react-dom/client';

// Child Component
function UserCard({ name, role, onClick }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
      <h3>{name}</h3>
      <p>{role}</p>
      <button onClick={onClick}>Greet</button>
    </div>
  );
}

// Parent Component
function App() {
  const handleGreeting = (name) => {
    alert(`Hello, ${name}!`);
  };

  return (
    <div>
      <h1>User List</h1>
      <UserCard
        name="Vinay Kumar"
        role="React Developer"
        onClick={() => handleGreeting("Vinay")}
      />
      <UserCard
        name="Priya Sharma"
        role="UI Designer"
        onClick={() => handleGreeting("Priya")}
      />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Tips & Common Pitfalls

✅ Tips

• Destructure props for cleaner, readable code.

• Use default props to handle missing data.

• Consider PropTypes for validating props during development.

• Design components with minimal coupling—make them configurable via props.

⚠️ Common Pitfalls

• Mutating props inside a component (they are read-only).

• Forgetting to pass required props, resulting in undefined errors.

• Passing too many unrelated props—can signal the need to split components.

• Over-relying on props for deeply nested data—consider using Context API or state management libraries instead.

Props vs State – Quick Comparison Table

Conclusion: Best Practices for Creating Components Using Props

Creating React components using props allows you to:

• Build scalable, modular, and reusable components.

• Minimize code duplication.

• Make UI dynamic and flexible without rewriting logic.

Actionable Takeaways:

• Use props to customize behavior and content.

• Validate props using PropTypes.

• Use destructuring for clarity.

• Don’t modify props inside the component.