Closed fsabreu closed 6 years ago
You can use the @for
attribute 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}
| ))}
Thank you again @bluewings. Works great!
Hi again,
I have one more problem. I need to pass a .map function to pug. How can I pass this code?
thank you for this awesome work.