DEV Community

Cover image for Deep dive into understanding Props in React
Hassan Shahzad Aheer
Hassan Shahzad Aheer

Posted on

2

Deep dive into understanding Props in React

1. What are Props?

  • Props (short for properties) are a fundamental concept in React.
  • Think of them as attributes you pass to a component, similar to HTML attributes in tags.
  • Props allow you to send data from a parent component to a child component.
  • They are read-only and help make your components dynamic and reusable.

2. Creating Props:

  • To create props, you include attributes in your component like this:

     <Contact name="Ali" />
    

3. Accessing Props:

  • In your child component, you access props using the props object:

     export default function Contact(props) {
       return (
         <h1>{props.name}</h1>
       );
     }
    

4. Destructuring Props:

  • Destructuring allows you to extract props more concisely.
  • Example:

     export default function Contact({ name }) {
       return (
         <h1>{name}</h1>
       );
     }
    
  • This is especially useful when you have multiple props.

5. Why Use Destructuring?

  • Destructuring props makes your code cleaner and more readable.
  • It reduces repetition by directly extracting the properties you need.
  • It also simplifies access to nested props.

6. Example:

  • Let's create a simple component that receives and displays user information using props and destructuring:
   // ParentComponent.js
   import React from 'react';
   import UserProfile from './UserProfile';

   export default function ParentComponent() {
     const user = {
       name: 'Ali',
       age: 30,
       city: 'New York',
     };

     return (
       <UserProfile user={user} />
     );
   }

   // UserProfile.js
   import React from 'react';

   export default function UserProfile({ user }) {
     return (
       <div>
         <h1>{user.name}</h1>
         <p>Age: {user.age}</p>
         <p>City: {user.city}</p>
       </div>
     );
   }
Enter fullscreen mode Exit fullscreen mode

7. Conclusion:

  • In React, props are like attributes you pass from parent to child components.
  • Destructuring props simplifies access and enhances code readability.
  • Understanding props is essential for building dynamic and reusable React applications.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
hmontarroyos profile image
Hebert Montarroyos •

Congratulations on a well-explained post about React Props! You've covered the fundamentals clearly and provided practical examples. It's a valuable resource for beginners looking to understand this crucial concept. Keep up the excellent work!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs