Render props pattern in React JS

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

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

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

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