Cara Render String HTML di React Component


Kadang kita perlu untuk menampilkan string HTML ketika menggunakan React. String ini biasanya berasal dari rich text editor atau WYSIWYG editor. Bagaimana caranya?

.

Minggu ini saya mengerjakan sebuah project React dengan Typescript, yang di dalamnya saya perlu menggunakan rich text editor atau WYSIWYG editor. Hasil inputan dari rich text editor ini nantinya akan dikirim ke backend, dan biasanya akan disimpan dalam bentuk string HTML.

String HTML? Jujur saya tidak tahu pasti apa namanya, tapi setidaknya ketika kita kita coba get data melalui API, tampilannya akan terlihat seperti ini contohnya:

Familiar dengan sintaks seperti itu? Ya, itu adalah sintaks HTML yang menampilkan sebuah paragraf berisi some dummy data

Yang jadi pertanyaan kemudian adalah, bagaimana cara kita untuk menampilkan data string di atas sama persis dengan ketika kita melihatnya di rich text editor?

Kita tidak bisa merender string ini secara langsung di dalam React atau lebih khususnya ke dalam file JSX. Tag html juga akan diperlakukan sebagai string mentah.

Solusi Render HTML di React

Beberapa cara di bawah ini mungkin akan membantu kamu jika menghadapi masalah yang sama. Cara-cara ini mengubah string HTML menjadi satu atau lebih React element.

Render HTML menggunakan dangerouslySetInnerHTML

Jika keperluan kita hanya untuk merender HTML, seharusnya dengan menggunakan dangerouslySetInnerHTML saja sudah cukup.

Peringatan: Setting HTML dari kode ini berisiko, karena ini mempermudah mengekspos pengguna kita ke serangan skrip lintas situs (XSS) secara tidak sengaja.

Render HTML dengan html-react-parser

Cara yang kedua, kita dapat menggunakan library html-react-parser. Cara penggunaannya pun cukup mudah. Kita cukup import library html-react-parser ini, kemudian gunakan dengan cara kurang lebih seperti di bawah ini:

Peringatan: Seperti library-library yang lain, kita harus benar-benar mempertimbangkan apakah kita memang perlu menggunakannya. Sebisa mungkin hindari penggunaan library jika memang tidak terlalu dibutuhkan.

Kesimpulan

React baik itu menggunakan JavaScript maupun TypeScript tidak bisa langsung menampilkan string HTML. Untuk menampilkan HTML kita bisa menggunakan beberapa cara di atas. Semoga bermanfaat. Jika ada cara lain atau ada sesuatu yang ingin ditanyakan silakan bisa tulis di komentar.

Kamu juga bisa berlangganan email untuk mendapatkan informasi dan artikel terbaru saya melalui form di bawah ini.

Comments