Callback within a render callback example

callback-within-render-callback.jsx

/*

https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce

The render callbak examples in the blog post only pass data to the
render callback, and the render callback simply renders the data.

What if wanted to pass another callback as an argument to the render
callback? Does this pattern feel ok?

*/

type ToggleProps = {
  items: [
    {
      render: (selected: boolean, onSelected: () => void) => React.Node,
    }
  ],
};

type ToggleState = {
  selectedIndex: number,
};

class Toggle extends React.Component<ToggleProps, ToggleState> {
  state = {selectedIndex: -1};

  render() {
    const {selectedIndex} = this.state;
    return (
      <div>
        {
          this.props.items.map((item, i) => {
            item.render(
              selectedIndex === i,
              () => this.setState({selectedIndex: i})
            );
          });
        }
      </div>
    )
  }
}

// ********************************
// Example usage of Toggle

class MyToggle extends React.Component {
  render() {
    return <Toggle items={this.items} />;
  }

  items = [
    {
      render: (selected, onSelected) => {
        return (
          <div className={selected ? "selected" : ""}>
            <Button onClick={onSelected} />
          </div>
        );
      }
    },
    {
      render: (selected, onSelected) => {
        return (
          <div className={selected ? "selected" : ""}>
            <Captcha onSolved={onSelected} />
          </div>
        );
      }
    }
  ];
}