JSX : how unordered list renders with an array inside instead of list?

Hi !
in the html course, I have learned that I should use li to create list in ul.
However, in this practice, we placed an array inside ul.
definitely there should be something behind rendering array’s item in the ul list to appear something like the conventional ul like this :

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

// instead of this 

const liArray = [
  <li>item 1</li>, 
  <li>item 2<li>, 
  <li>item 3</li>
];

now I’m wondering the logic behind !
is it mapping elements in array or just accept the whole array as a format ??

Hello, and welcome to the forums!

When the JSX is processed, it is able to interpret the array containing JSX <li> elements that were created with the map call on the original array. Behind the scenes, that JSX array contains more than what you may think.

Here is an example:

import React from "react";
import ReactDOM from "react-dom";

const colors = ['green', 'red', 'blue'];

const colorLiElements = colors.map((colorName) => {
  return <li>{colorName}</li>;
});

console.log(colorLiElements);

ReactDOM.render(
  <div>
    <ul>{colorLiElements}</ul>
    <hr />
    <ul>
      <li>{colors[0]}</li>
      <li>{colors[1]}</li>
      <li>{colors[2]}</li>
    </ul>
  </div>,
  document.getElementById("app")
);

The console.log() of the array created with map that produces the list items shows this in the console:
image

So we can see it becomes an array that React will be able to process when it comes time to render here:
<ul>{colorLiElements}</ul>

In the example above, we also go through the list of colors manually to create each list item to show that in the end it creates the same thing for the browser:

image

and the HTML DOM source in the browser shows they end up being the same after processing:
image

The top 3 <li>...</li> were from the array processing <ul>{colorLiElements}</ul>
The bottom 3 were from manually accessing each color:

      <li>{colors[0]}</li>
      <li>{colors[1]}</li>
      <li>{colors[2]}</li>

I hope this helps. If I missed the mark on what you were asking, please let me know.

1 Like

thanks for your answer !
yes I understand that both lead to same result, but my point is that inside ul we placed array which compiler (the default compiler of js without any extension ) see it like this :

<ul>

[ 
<li></li>
<li></li>
<li></li>
]

</ul>

//while in fact it is being rendered like this to browser

<ul>
<li></li>
<li></li>
<li></li>
</ul>

my point is no matter what is inside an array, finally its an array being passed to <ul> so there should be definitely something checking array items to see whether it is jsx or not and if so , convert it to something that js could compile .
now , that logic is either in react (jsx) or JS it self , but definitely there should be something to convert it.
now my question is where is that thing and how it converts.