jinja-macro-react-equivalent.js

/**
----------------------------------------------------------------------
Jinja Macro with simple Call
----------------------------------------------------------------------
{% macro render_dialog(title, class='dialog') -%}
    <div class="{{ class }}">
        <h2>{{ title }}</h2>
        <div class="contents">
            {{ caller() }}
        </div>
    </div>
{%- endmacro %}

{% call render_dialog('Hello World') %}
    This is a simple dialog rendered by using a macro and
    a call block.
{% endcall %}
*/

// Equivalent with renderProps
import React from "react";
import ReactDOM from "react-dom";

const A = props => (
  <div className={props.className}>
    <h2>Render Props</h2>
    <div class="contents">{props.children()}</div>
  </div>
);

const App = () => (
  <A className="app-block">{() => <div>{`I'm rendered`}</div>}</A>
);

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

/**
----------------------------------------------------------------------
Jinja Macro call block can be used with arguments
----------------------------------------------------------------------
{% macro dump_users(users) -%}
    <ul>
    {%- for user in users %}
        <li><p>{{ user.username|e }}</p>{{ caller(user) }}</li>
    {%- endfor %}
    </ul>
{%- endmacro %}

{% call(user) dump_users(list_of_user) %}
    <dl>
        <dl>Realname</dl>
        <dd>{{ user.realname|e }}</dd>
        <dl>Description</dl>
        <dd>{{ user.description }}</dd>
    </dl>
{% endcall %}
*/

// Equivalent with renderProps
import React from "react";
import ReactDOM from "react-dom";

const users = [{ name: "John" }, { name: "Doe" }];

const A = ({ className, users, children }) => (
  <div className={className} users={users}>
    <h2>Render Props</h2>
    <div class="contents">{users.map(user => children(user))}</div>
  </div>
);

const App = () => (
  <A className="app-block" users={users}>
    {user => <div key={user.name}>{`${user.name} is rendered`}</div>}
  </A>
);

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