Props in ReactJS

Props

In React, "props" is short for "properties." React components use props to communicate with each other.

Props are read-only values (similar to HTML-tag attributes) that are passed from a parent component to a child component. They are used to customize and configure the behavior of a child component.

Usage

Passing props: Pass props from a parent component to a child component using the JSX syntax.
```
function Parent() {
  return <Child name="John" age={30} />;
}
```
Accessing props: Access props in a child component using the props object.
```
function Child(props) {
  return <h1>Hello, {props.name}!</h1>;
}
```

Destructuring props: Destructure props in a child component for easier access.

function Child({ name, age }) {
return <h1>Hello, {name}! You are {age} years old.</h1>;

Key characteristics of props

Read-only: Props cannot be changed by the child component.
Immutable: Props are immutable, meaning they cannot be modified once they are set.
Unidirectional Data Flow: Props are passed from a parent component to a child component.
Customizable: Props allow you to customize the behavior of a child component.
Re-render: If a component receives new or different props from its parent, it will re-render to accommodate the updated data.

When component props defaults to true?

If you pass no value for a prop, it defaults to true. This behavior is available so that it matches the behavior of HTML.

For example, below expressions are equivalent,

<MyInput autocomplete />

<MyInput autocomplete={true} />

Note: It is not recommended to use this approach because it can be confused with the ES6 object shorthand (example, {name} which is short for {name: name})

Supported Data Types For Props

Props can accept,

Primitive Data Type: String, Number & Boolean
Complex Data Type: Array, Object & Functions (Callbacks)

Special Data Type:

Node Props: accepts any renderable content, including strings, numbers, React elements, arrays, or fragments containing these types

import PropTypes from "prop-types";

function ParentComponent() {
  const content = (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a sample content.</p>
    </div>
  );

  return <ChildComponent content={content} />;
}

function ChildComponent({ content }) {
  return <div>{content}</div>;
}

ChildComponent.propTypes = {
  content: PropTypes.node.isRequired,
};

Element Props: Accepts single React element

import PropTypes from "prop-types";
import CustomButton from "./CustomButton";

function ParentComponent() {
  return <ChildComponent button={<CustomButton />} />;
}

function ChildComponent({ button }) {
  return (
    <div>
      <h2>Click the button below:</h2>
      {button}
    </div>
  );
}

ChildComponent.propTypes = {
  button: PropTypes.element.isRequired,
};

What Is Props Forwarding?

Prop forwarding is a technique in React that allows you to pass props from a parent component to a child component, without having to manually pass each prop individually.

This is done by using the ... spread operator to pass props from a parent component to a child component.

function Parent(props) {
  return <Child {...props} />;
}

function Child(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
      <p>Location: {props.location}</p>
    </div>
  );
}

Forwarding all props can lead to props pollution, where the child component receives unnecessary props. This can make the child component harder to understand and maintain.

Default Props

Default props allows you to specify a default/fallback value for a prop when it is not provided by the parent component.

If a prop is set to null/false, the default value will not be used. Default props will only apply when the prop is missing or if it is explicitly set to undefined.

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

Greeting.defaultProps = {
  name: "Guest",
};

export default Greeting;

Starting with React 18, the defaultProps property is conside red less common for functional components since destructuring with default values is a more modern and concise approach.

// Default Props with Destructuring
const Greeting = ({ name = "Guest" }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

Render Props

In Render props pattern, the parent component determines the rendered content by passing a function (the render prop that returns JSX) to the child component.

The child component invokes this function to render content, allowing the parent to control what is displayed

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";

function ParentComponent() {
  return (
    <DataFetcher
      render={(data) => (
        <div>
          <h1>Fetched Data:</h1>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    />
  );
}

function DataFetcher({ render }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Simulate data fetching
    setTimeout(() => {
      setData({ id: 1, name: "Sample Data" });
    }, 1000);
  }, []);

  return <div>{data ? render(data) : <p>Loading...</p>}</div>;
}

DataFetcher.propTypes = {
  render: PropTypes.func.isRequired,
};

Props​

Usage​

Key characteristics of props​

When component props defaults to true?​

Supported Data Types For Props​

What Is Props Forwarding?​

Default Props​

Render Props​