bismillah
sekedar catatan pribadi ajah, karena sebelumnya kita sudah bahas cara memecah sebuah object array di react, dengan declarative code, menggunakan fungsi map() dan filter(), berikut ini contoh pemanfaatannya, dalam format .js ataupun .jsx format.
const orang = [{ nama: "desta" }, { nama: "putri" }, { nama: "haikal" }];
/* FORMAT JS */
const element = React.createElement(
"ol",
null,
orang.map(seorang =>
React.createElement("li", { key: seorang.nama }, seorang.nama)
)
);const orangs = [{ nama: "desta" }, { nama: "putri" }, { nama: "haikal" }];
/* FORMAT JSX */
const element = <ol>
{
orangs.map((orang) => (
<li>{orang.nama}</li>
))
}
</ol>
/* DALAM FORMAT KOMPONEN TERSENDIRI */
class ContactList extends React.Component {
render() {
const orang = [{ nama: "desta" }, { nama: "putri" }, { nama: "haikal" }];
return (
<ol>
{orang.map(orangs => (
<li>{orangs.nama}</li>
))}
</ol>
);
}
}
ReactDOM.render(<ContactList />, document.getElementById("root"));
resultnya sama seperti ini:
live version bisa dicek dihalaman ini: https://tpbt4.csb.app/
oke done, have a nice day!