Can we use pug native if/each?

[billypon]

For now, we use @if for condition and @repeat for iterate. But can we use pug native if/each and get the same result?

[bluewings]

@billypon You can use the pug native if / each, but you can only use them before they are converted to jsx, as shown below, and you can't use variables passed at runtime.

- var suits = ['club', 'diamond', 'heart', 'spade', 'club', 'diamond', 'heart', 'spade']
ul
  each suit in suits
    if suit === 'club'
      li ♣
    else if suit === 'diamond'
      li ♦
    else if suit === 'heart'
      li ♥
    else if suit === 'spade'
      li ♠

import React from 'react';

export default function () {
  return (
    <ul>
      <li>♣</li>
      <li>♦</li>
      <li>♥</li>
      <li>♠</li>
      <li>♣</li>
      <li>♦</li>
      <li>♥</li>
      <li>♠</li>
    </ul>
  );
}

[billypon]

// template.pug
each item in array
  div= item

// component.jsx
import React from 'react';
import template from './template.pug';

export default function () {
  const array = [ 1, 2, 3 ];
  return template({ array });
}

This code can't work.

[billypon]

due to support native pug syntax, now this issue is solved #