I am using a Create-React-App through Codesandbox using hook capable versions. I am trying to create a simple toggle using newer React options of Stateless functional ponents, and hooks. I created a renderprop pattern using children prop, but am getting a "children is not a function error". Professor Google has failed me.

App.js

import React from "react";
import ReactDOM from "react-dom";
import Toggle from "./Toggle";
import "./styles.css";

const App = () => {
  return (
    <div className="App">
      <Toggle>
        <Toggle>
          {({ show, toggleShow }) => (
            <div>
              {show && <h1>Show Me</h1>}
              <button onClick={toggleShow}>Show / Hide</button>
            </div>
          )}
        </Toggle>
      </Toggle>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

and Toggle.js

import { useState } from "react";

const Toggle = ({ children }) => {
  let [show, setShow] = useState(false);

  const toggleShow = () => setShow((show = !show));

  return children({ show, toggleShow });
};

export default Toggle;

CodeSandbox

I am using a Create-React-App through Codesandbox using hook capable versions. I am trying to create a simple toggle using newer React options of Stateless functional ponents, and hooks. I created a renderprop pattern using children prop, but am getting a "children is not a function error". Professor Google has failed me.

App.js

import React from "react";
import ReactDOM from "react-dom";
import Toggle from "./Toggle";
import "./styles.css";

const App = () => {
  return (
    <div className="App">
      <Toggle>
        <Toggle>
          {({ show, toggleShow }) => (
            <div>
              {show && <h1>Show Me</h1>}
              <button onClick={toggleShow}>Show / Hide</button>
            </div>
          )}
        </Toggle>
      </Toggle>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

and Toggle.js

import { useState } from "react";

const Toggle = ({ children }) => {
  let [show, setShow] = useState(false);

  const toggleShow = () => setShow((show = !show));

  return children({ show, toggleShow });
};

export default Toggle;

CodeSandbox

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Feb 11, 2019 at 7:37 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked Jan 25, 2019 at 21:59 cycle4passioncycle4passion 3,34133 gold badges1919 silver badges2929 bronze badges 1

• But children[0] should be one. – Jonas Wilms Commented Jan 25, 2019 at 22:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

<Toggle>
   <Toggle>

The outer Toggle has as its children another Toggle ponent, so this is where the exception is being thrown. The inner Toggle would be fine since its children is indeed a function, but the exception prevents the rendering from getting there.

I'm not quite sure what your goal is nesting Toggles inside toggles, so perhaps the fix is to just delete one of them. Alternatively, if your intention is to allow non-functions as children, then you can modify your Toggle ponent to something like this:

const Toggle = ({ children }) => {
  let [show, setShow] = useState(false);

  const toggleShow = () => setShow((show = !show));

  if (typeof children === 'function') {
    return children({ show, toggleShow });
  }
  return children;
};