react js..help..

Question

i found this code

return (<ul>
{this.state.list.map(e => {
return <li key={e}>{e}</li>})}
</ul>)

people said that "{}" in jsx is to interpret the code inside it as javascript,
since "this.state.list.map" is already inside a curly bracket,why do we need to wrap the "e" variable inside another curly bracket again = {e}?
doesnt it already interpreted as javascript variable since it already inside a cruly bracket?

Answer 1

The curly brackets in between the <li>{e}</li> are there in order to get the evaluated value of e.

Without them you will get the letter 'e' as a string.

you only need those curly brackets because e is wrapped in a HTML element

Answer 2

In order to understand JSX, we need to study from a simple example,

const List = <ul><li>Item 1</li></ul>;

This would create a List component with html code of <ul><li>Item 1</li></ul>

Notice that List is not equal to string "<ul><li>Item 1</li></ul>" nor it's a HTML. It's a JSX code, babel transpiler would be needed to transpile it to HTML code.

Jsx code can be inserted with javascript variables with {} notation.

So we can write
const item = "Item 1";
const List = <ul><li>{item}</li></ul>;

if in array variables:
const items = ["Item 1", "Item 2"];
const List = <ul>
<li key={0}>{items[0]}</li>
<li key={1}>{items[1]}</li>
</ul>;

We can also populate the array data using map method:

const items = ["Item 1", "Item 2"];
const List = <ul>
{ items.map(( e,i ) => {
return
<li key={i}>{e}</li>
}) }
</ul>;

Notice that the return function in fact returns a jsx code (not string, without double quotes "), thus it needs {} in order to insert js variables into jsx.

Answer 3

The map method can be further simplified to

const List = <ul> {items.map(( e,i ) =>
<li key={i}>{e}</li>) }</ul>;

Answer 4

tq..i got it now