Loops

Usage

Block

{{{~<array> :<value>:<index>}}}
loop output
{{{~}}}

Inline

{{~<array> :<value>:<index>}}loop output{{~}}

Examples

Using loops

Block

Take this template using a block loop statement to render import statements to the react file when modules is specified.

Dot Template

import React from 'react';
{{{~tps.answers.modules :value}}}
import {{= value}} from "@app/{{= value}}";
{{{~}}}

Result

null

Inline

Take this template using a inline loop statement to render props to the react component when props are passed.

Dot Template

{{{
    const propsLastIndex = tps.answers.props.length - 1;
}}}
const App = ({ {{~tps.answers.props :value:index}}{{= value + (index !== propsLastIndex ? ", " : "") }}{{~}} }) => {
    return (
        /* react code .... */
    );
};

Result

null

Tips

Prefer join over inline loops when possibilities

When you dont need anything complex and only want to separate values by some separator, prefer join over inline loops. This will help you keep your code nice and clean.

Take this template using a inline loop.

Dot Template

{{{
    const propsLastIndex = tps.answers.props.length - 1;
}}}
const App = ({ {{~tps.answers.props :value:index}}{{= value + (index !== propsLastIndex ? ", " : "") }}{{~}} }) => {
    return (
        /* react code .... */
    );
};

vs this template using join.

Dot Template

const App = ({ {{= tps.answers.props.join(", ")}} }) => {
    return (
        /* react code .... */
    );
};