modal crud pada tailwindcss

kan aku mau bikin modal crud pakai tailwind, nah tapi saat button editnya di klik ambil datanya belum dinamis, jadi misal klik edit data ke 2 tapi yang keganti data yang pertama. bagaimana ya solusinyasc codingan modalnya

avatar rizalirfansyah
@rizalirfansyah

2 Kontribusi 0 Poin

Diperbarui 1 tahun yang lalu

1 Jawaban:

<div>Untuk membuat data menjadi dinamis, kamu perlu melewatkan ID data yang ingin kamu edit ke dalam modal. Kamu dapat melakukannya dengan menambahkan atribut ID pada elemen data dan kemudian melewatkan ID tersebut ke dalam atribut data-id pada modal. Contohnya:<br><br></div><pre>html &lt;table&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;John Doe&lt;/td&gt; &lt;td&gt;johndoe@example.com&lt;/td&gt; &lt;td&gt;&lt;button data-id="1"&gt;Edit&lt;/button&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;Jane Doe&lt;/td&gt; &lt;td&gt;janedoe@example.com&lt;/td&gt; &lt;td&gt;&lt;button data-id="2"&gt;Edit&lt;/button&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </pre><div><br>Kemudian, kamu dapat menggunakan atribut data-id untuk mendapatkan ID dari data yang ingin diubah oleh pengguna. Contohnya:<br><br></div><pre>html &lt;div class="modal" id="edit-modal"&gt; &lt;div class="modal-content"&gt; &lt;h2&gt;Edit Data&lt;/h2&gt; &lt;form action="/edit" method="post"&gt; &lt;input type="hidden" name="id" value="{{ data.id }}"&gt; &lt;input type="text" name="name" value="{{ data.name }}"&gt; &lt;input type="email" name="email" value="{{ data.email }}"&gt; &lt;button type="submit"&gt;Simpan&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; </pre><div><br>Pada modal, kamu dapat menggunakan variabel data.id untuk mendapatkan ID dari data yang ingin diubah oleh pengguna. Kemudian, kamu dapat menggunakan ID tersebut untuk mengambil data dari database. Contohnya:<br><br></div><pre>```javascript function editData(event) { event.preventDefault();

// Mendapatkan ID dari data yang ingin diubah oleh pengguna. const id = event.target.dataset.id;

// Mengambil data dari database. const data = await axios.get(/data/${id});

// Render modal dengan data tersebut. ReactDOM.render(<EditModal data={data} />, document.getElementById("edit-modal")); } ```</pre><div><br>Kode ini akan mengambil data dari database dan kemudian merender modal dengan data tersebut. Pengguna dapat mengubah data di dalam modal dan mengklik tombol Simpan untuk menyimpan perubahan.</div>

avatar adamajalah27
@adamajalah27

119 Kontribusi 40 Poin

Dipost 1 tahun yang lalu

Login untuk ikut Jawaban