How to pass a function and return ReactNode?

[billypon]

How to pass a function and return ReactNode?

Like this example, how to transform it to pug file?

render() {
  return (
    <MyComponent renderFunction={ data => <div>{ data }</div> } />
  );
}

[bluewings]

@billypon You can receive them from a parent function or describe them in pure jsx syntax.

div
  // from parent
  MyComponent(renderFunction='{renderFunction}')
  // inline function with jsx
  MyComponent(renderFunction='{data => <div>{data}</div>}')

import React from 'react';

export default function (params = {}) {
  const { renderFunction, MyComponent } = params;
  return (
    <div>
      { /* from parent */ }
      <MyComponent renderFunction={renderFunction} />
      { /* inline function with jsx */ }
      <MyComponent renderFunction={data => <div>{data}</div>} />
    </div>
  );
}

[billypon]

@bluewings

MyComponent(renderFunction='{data => <div>{data}</div>}')

But this code <div>{data}</div> isn't pug syntax, just html syntax.

[billypon]

The renderFunction from parent can work, but I want this function place in pug file.