Render props pattern in React JS
Tags: webdev, react, designpatterns, tutorial
Published: 2023-10-23 19:18:32

**What is render props pattern in react js**
In React, Render Props is a way to share code by passing a function as a prop. This function controls what a component displays, making it flexible and versatile. It's like sharing a special tool with a component to change its behavior.

Let's see the problem and solution using the Toggle Switch example with the Render Props pattern, step by step:

**Step 1: Create a Problematic Toggle Switch Component**

```jsx
import React, { useState } from 'react';

function ToggleSwitch() {
  const [isToggled, setIsToggled] = useState(false);

  const handleToggle = () => {
    setIsToggled(!isToggled);
  }

  return (
    <div>
      <button onClick={handleToggle}>
        Toggle
      </button>
      {isToggled ? (
        <div>
          <p>Content is visible!</p>
        </div>
      ) : null}
    </div>
  );
}

export default ToggleSwitch;
```

**Explanation**:

- We've created a "ToggleSwitch" component that controls a switch and the visibility of some content.
- When you click the button, the switch toggles, and it shows or hides content accordingly.
- However, the code isn't very organized, and the logic for the toggle and the content are mixed together.

**Step 2: Create a Solution using the Render Props Pattern**

```jsx
import React, { useState } from 'react';

function ToggleSwitch({ onToggle, children }) {
  const [isToggled, setIsToggled] = useState(false);

  const handleToggle = () => {
    setIsToggled(!isToggled);
    if (onToggle) {
      onToggle(!isToggled);
    }
  }

  return (
    <div>
      <button onClick={handleToggle}>
        Toggle
      </button>
      {children(isToggled)}
    </div>
  );
}

export default ToggleSwitch;
```

**Explanation**:

- We've introduced a "ToggleSwitch" component that solves the problem using the Render Props pattern.
- This component takes two important things:
  - `onToggle`: A function that tells us what to do when the toggle button is clicked.
  - `children`: A function that decides what content to show or hide based on the switch's state.
- The "isToggled" state helps us keep track of the switch's position.
- When you click the button, "handleToggle" is called, which changes the switch's state and triggers "onToggle" if provided.

**Step 3: Use the Toggle Switch Component in Your App**

```jsx
import React, { useState } from 'react';
import ToggleSwitch from './ToggleSwitch';

function App() {
  const [isContentVisible, setIsContentVisible] = useState(false);

  return (
    <div>
      <h1>Render Props Toggle Switch Example</h1>
      <ToggleSwitch onToggle={setIsContentVisible}>
        {(isToggled) => (
          <div>
            <p>Toggle Content</p>
            {isToggled && <p>Content is visible!</p>}
          </div>
        )}
      </ToggleSwitch>
    </div>
  );
}

export default App;
```

**Explanation**:

- In your main "App" component, you're using the "ToggleSwitch" component.
- You're controlling the visibility of content with "isContentVisible."
- The "onToggle" function ("setIsContentVisible") tells the "ToggleSwitch" what to do when you click the button.
- Inside the "ToggleSwitch," the "children" function decides what content to display or hide based on the state of the switch.

In simple terms, the Render Props pattern helps you create a clean and organized way to control different parts of your app without mixing up the logic. This makes it easier to manage and reuse your code.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: [Linkedin Profile](https://www.linkedin.com/in/kurmivivek295/)