React : Nested JSX

JSX Nested

Anda bisa membuat elemen JSX di dalam elemen JSX lainnya, seperti di HTML.

Berikut adalah contoh elemen <X1> JSX, Nested di dalam elemen <X1 JSX:

<a href="https://www.example.com"> <h1> Klik saya! </h1> </a>

Untuk membuatnya lebih mudah dibaca, Anda dapat menggunakan jeda dan lekukan gaya HTML:

<a href="https://www.example.com">
  <h1>
    Klik saya!
  </h1>
</a>

Jika ekspresi JSX mengambil lebih dari satu baris, maka Anda harus membungkus ekspresi JSX multi-baris dalam tanda kurung. Ini terlihat aneh pada awalnya, tetapi Anda terbiasa:

(
  <a href="https://www.example.com">
    <h1>
      Klik saya!
    </h1>
  </a>
)

Ekspresi JSX Nested dapat disimpan sebagai variabel, diteruskan ke fungsi, dll., Seperti halnya ekspresi JSX non-Nested! Berikut adalah contoh ekspresi JSX  Nested yang disimpan sebagai variabel:

 const theExample = (
   <a href="https://www.example.com">
     <h1>
       Klik saya!
     </h1>
   </a>
 );

Instruksi
1.

Deklarasikan variabel baru bernama myDiv. Setel myDiv sama dengan elemen <div> </div> JSX.

Bungkus <div> </div> dalam tanda kurung, dan gunakan lekukan dan jeda baris seperti pada contoh. Di antara tag <div> </div>, buat <h1> </h1> yang berisi teks Hello world.

Jawab  ::
const myDiv = (
<div>
<h1>
    Hello World!
  </h1>
</div>);