react | SoloLearn: Learn to code for FREE!



i found this code return (<ul> { => { return <li key={e}>{e}</li>})} </ul>) people said that "{}" in jsx is to interpret the code inside it as javascript, since "" 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


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


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> { 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.


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


tq..i got it now