react js..help.. | SoloLearn: Learn to code for FREE!

+1

react js..help..

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?

4/5/2020 12:50:18 PM

Lily Mea

4 Answers

New Answer

+8

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

+3

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.

+3

The map method can be further simplified to const List = <ul> {items.map(( e,i ) => <li key={i}>{e}</li>) }</ul>;

+1

tq..i got it now