Props

In React, props (short for properties) are used to pass data from a parent component to a child component. Props are read-only, meaning that a child component cannot modify its own props. This ensures that components are reusable and makes it easier to reason about the state of your application. Props are a fundamental concept in React and are essential for building robust and scalable applications.

Basic Example

Here’s a simple example of how to use props in a React component:

// Parent component
import React from 'react';
import Child from './Child';
 
const Parent = () => {
  return (
    <div>
      <Child name="John" age={30} />
    </div>
  );
};
 
// Child component
import React from 'react';
 
const Child = (props) => {
  return (
    <div>
      <h1>Hello, my name is {props.name} and I am {props.age} years old.</h1>
    </div>
  );
};

In this example, the Parent component passes name and age props to the Child component, which then uses these props to render a greeting message.

Advanced Usage

You can also use the spread operator ({...props}) to pass all props from a parent component to a child component. This can be useful when you need to pass a large number of props or when you’re not sure what props will be passed.

// Parent component
import React from 'react';
import Child from './Child';
 
const Parent = () => {
  const props = {
    name: 'John',
    age: 30,
    occupation: 'Software Engineer',
  };
 
  return (
    <div>
      <Child {...props} />
    </div>
  );
};
 
// Child component
import React from 'react';
 
const Child = (props) => {
  return (
    <div>
      <h1>Hello, my name is {props.name} and I am {props.age} years old. I work as a {props.occupation}.</h1>
    </div>
  );
};

You can also use React’s built-in useParams hook to access props in functional components.

// Child component
import React from 'react';
import { useParams } from 'react-router-dom';
 
const Child = () => {
  const params = useParams();
  const name = params.name;
  const age = params.age;
 
  return (
    <div>
      <h1>Hello, my name is {name} and I am {age} years old.</h1>
    </div>
  );
};

Best Practices

• Use meaningful prop names: Use descriptive and concise names for your props to make your code easier to read and understand.
• Use prop types: Use prop types to specify the type of each prop and ensure that the correct data type is passed to your components.
• Avoid mutating props: Never mutate props directly, as this can cause unexpected behavior and make your code harder to reason about.
• Use default props: Use default props to provide a fallback value for props that are not passed to your components.

Key Takeaways

• Props are used to pass data from a parent component to a child component.
• Props are read-only and should not be mutated directly.
• Use meaningful prop names, prop types, and default props to make your code more robust and maintainable.
• The spread operator ({...props}) can be used to pass all props from a parent component to a child component.