React : Elemen Luar JSX

Elemen Luar JSX

Ada aturan yang belum kami sebutkan: ekspresi JSX harus memiliki tepat satu elemen terluar.

Dengan kata lain, kode ini akan berfungsi:

paragraf const = (
   <div id = "i-am-the-outermost-element">
     <p> Saya adalah paragraf. </p>
     <p> Saya juga paragraf. </p>
   </div>
);

Tetapi kode ini tidak akan berfungsi:

paragraf const = (
   <p> Saya adalah paragraf. </p>
   <p> Saya juga paragraf. </p>
);

Tag pembuka pertama dan tag penutup akhir dari ekspresi JSX harus dimiliki oleh elemen JSX yang sama!

Sangat mudah untuk melupakan aturan ini, dan berakhir dengan kesalahan yang sulit untuk didiagnosis.

Jika Anda melihat bahwa ekspresi JSX memiliki beberapa elemen luar, solusinya biasanya sederhana: bungkus ekspresi JSX dalam <div> </div>.
Instruksi
1. Blog teman Anda rusak! Dia memintamu untuk memperbaikinya.

Anda segera mendiagnosis masalah: ekspresi JSX dengan beberapa elemen luar.

const blog = (
  <img src="pics/192940u73.jpg" />
  <h1>
    Welcome to Dan's Blog!
  </h1>
  <article>
    Wow I had the tastiest sandwich today.  I <strong>literally</strong> almost freaked out.
  </article>
 
);
 

Perbaiki kode rusak teman Anda dengan membungkus JSX mereka dalam <div> </div>.

Jawab :
const blog = (
  <div><img src="pics/192940u73.jpg" />
  <h1>
    Welcome to Dan's Blog!
  </h1>
  <article>
    Wow I had the tastiest sandwich today.  I <strong>literally</strong> almost freaked out.
  </article>
  </div>
);