how can I pass .map funciontion

[fsabreu]

Hi again,

I have one more problem. I need to pass a .map function to pug. How can I pass this code?

{
      this.state.listCards.map((data) => {
        return (
          <div className="card card-materia" key={data.id}>
            <div className="card-body">
              <div className="card-menu">
                <i className="fas fa-ellipsis-v" />
                <div className="cm-floating">
                  <a className="cmf-agenda" href="agendamento.html">
                    <i className="ti-agenda" />
                    <FormattedMessage {...messages.scheduled} />
                  </a>
                  <a className="cmf-copy" href="#">
                    <i className="pe-7s-copy-file" />
                    <FormattedMessage {...messages.copy} />
                  </a>
                  <a className="cmf-trash" href="#">
                    <i className="ti-trash" />
                    <FormattedMessage {...messages.delete} />
                  </a>
                </div>
              </div>
              <div className={`cm-icon ${data.icon}`}>
                <i />
              </div>
              <h2 className="cm-title">{data.disciplineAbbreviation}</h2>
              <span className="badge badge-warning">{data.status}</span>
              <p className="cm-questions">{data.questionNumber}</p>
              <div className="cm-info">
                <a href="#">{data.disciplineName}</a>
                <a href="#">{data.year}</a>
                <a href="#">{data.segment}</a>
              </div>
              <div className="cm-date">
                <i className="pe-7s-refresh-2" />
                {data.date}
              </div>
            </div>
        </div>
        );
      })
    }

thank you for this awesome work.

[bluewings]

You can use the @forattribute instead of using .map function.

The @for attribute can be used as an array or object.

Fragment
  .card.card-materia(@for='data in this.state.listCards', key='{data.id}')
    .card-body
      .cm-date
        .pe-7s-refresh-2  
        | {data.date}

import React from 'react';

const __macro_for = items => ({ map: mapFn => Object.keys((items || [])).map((key, index) => mapFn(items[key], key, index)) });

export default function (params = {}) {
  const { Fragment } = params;
  return (
    <Fragment>
      { __macro_for(this.state.listCards).map((data, i) => (
        <div className="card card-materia" key={data.id}>
          <div className="card-body">
            <div className="cm-date">
              <div className="pe-7s-refresh-2" />
              {data.date}
            </div>
          </div>
        </div>
      ))}
    </Fragment>
  );
}

Alternatively, you can use JavaScript as shown below, but the above solution is recommended.

Fragment
  | {this.state.listCards.map((data) => (
  .card.card-materia(key='{data.id}')
    .card-body
      .cm-date
        .pe-7s-refresh-2  
        | {data.date}
  | ))}

[fsabreu]

Thank you again @bluewings. Works great!