Understanding Render Props

Today we will be talking about render props in a react component and how to use it in our components.

Render props is a technique for sharing code between react components. By using render props we are able to give the developer the flexibility to display what he wants in the component.

Reacts default render prop is the children prop , in the level of flexibility , using the children prop is giving the developer full freedom to customise the component freely. Using render props can we use for specific areas that needs to be customised e.g the header or the footer.

Besides returning JSX we can also pass down functions from the parent component to the children component. Below we will take a closer look at passing your children component as a function , a render function prop.

we start by creating a parent component , and within that component we define a few functions like addCount and Minus Count and we create a state value that tracks the count.

In the return statement for Parent component , we use the children render prop , we check if children is a function and if it is it will pass these values (handleClick , addCount , minusCount etc) as arguments. Any element/ component that is a child to the Parent component will have access to these functions.

//Parent.js
import React, { useState } from "react";

export const Parent = ({ children }) => {
  const [count, setCount] = useState(0);

  const addCount = () => {
    setCount(count + 1);
  };

  const minusCount = () => {
    setCount(count - 1);
  };
  const handleClick = () => {
    alert("button passed down");
  };

  return (
    <div>
      <h1>Parent wrapper</h1>
      {typeof children === "function"
        ? children({ handleClick, addCount, minusCount, count })
        : children}
    </div>
  );
};

Then we create the children component that will take the parent components arguments as props, in this case below we created an Add and Minus components that receives a takes a props thats a function addCount or minusCount.

It is always good practice to set default values for your props , in the case that it is undefined , its value will be set to the default , e.g {openModal = false , addCount = () =>{}

//addMinus.js
import React, { useState } from "react";

export const Add = ({ children, addCount = () => {} }) => {
  return (
    <div>
      <button onClick={addCount}>Add</button>
    </div>
  );
};

export const Minus = ({ children, minusCount = () => {} }) => {
  return (
    <div>
      <button onClick={minusCount}>Minus</button>
    </div>
  );
};

Now we see how we use the render function prop in action. within the Parent component we create a function , and from the code below from the Parent component, it will evaluate that children is a function and will take the functions defined in Parent component as arguments.

//Parent.js
 {typeof children === "function"
        ? children({ handleClick, addCount, minusCount, count })
        : children}

And this how we use our Add and Minus component that takes in addCount and minusCount as a prop , and that prop returns a button that uses these function to add and minus the value of count

//App.js
import "./styles.css";
import { Add, Minus } from "./AddMinus";

import { Parent } from "./Parent";

export default function App() {
  return (
    <div className="App">
      <Parent>
        {({ addCount, count, minusCount }) => {
          return (
            <>
              <h1>{count}</h1>
              <Add addCount={addCount} />
              <Minus minusCount={minusCount} />
            </>
          );
        }}
      </Parent>
    </div>
  );
}

This is how it will look like , a h1 tag that displays the current state of count , then our Add and Minus components that runs the addCount and minusCount functions on click.

Hope you learned something new!