What are the types of props?

In React, props can be categorized into several types based on their usage and the kind of data they hold. Here are the main types of props:

1. Primitive Types

These are the basic data types that can be passed as props:

• String: Text values.
• Number: Numeric values.
• Boolean: True or false values.

Example:

function UserProfile({ name, age, isActive }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <p>Status: {isActive ? "Active" : "Inactive"}</p>
    </div>
  );
}

2. Array

Props can also be arrays, allowing you to pass multiple values.

Example:

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

3. Object

You can pass objects as props, which can contain multiple key-value pairs.

Example:

function Address({ address }) {
  return (
    <div>
      <p>{address.street}</p>
      <p>{address.city}, {address.state}</p>
    </div>
  );
}

4. Function

Props can also be functions, which is useful for handling events or callbacks.

Example:

function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

5. Node

This type includes anything that can be rendered, such as elements, strings, or numbers.

Example:

function Container({ children }) {
  return <div>{children}</div>;
}

6. Element

You can pass React elements as props, allowing for more complex structures.

Example:

function Wrapper({ element }) {
  return <div className="wrapper">{element}</div>;
}

Conclusion

Understanding the different types of props helps you design more flexible and reusable components. You can combine these types to create complex data structures that suit your application's needs.

If you're interested in learning more about props and their types, consider checking out the React Documentation on Props. Let me know if you have any further questions!