JSX for ... in a loop

Question

Given this object:

lst socials = { foo: 'http://foo' } 

I want to skip it in JSX. It works:

 let socialLinks = [] let socialBar for (let social in socials) { socialLinks.push(<li> <a alt={social} href={socials[social]}>{ social }</a> </li>) } if (socialLinks) { socialBar = <div className='align-bottom text-center'> <ul className='list-inline social-list mb24'> {socialLinks} </ul> </div> } 

But this is not (social undefined):

 let socialBar if (socials) { socialBar = <div className='align-bottom text-center'> <ul className='list-inline social-list mb24'> for(let social in socials) {<li> <a alt={social} href={socials[social]}>{ social }</a> // social is undefined </li>} </ul> </div> } 

What is the reason social undefined in the second example? I assume that the problem is related to the internal brackets, but I did not have time to fix it.

I can do forEach with object keys and do the same as in this post , but this is not much different from my working example.

To be clear - I work, I just want to be more clear on the problem of defining a scope (or syntax error, if so) in my second example.

Answer 1

JSX is just sugar that translates into a bunch of React.createElement function calls that you can find here for the documents: https://facebook.imtqy.com/react/docs/top-level-api.html#react.createelement

 ReactElement createElement( string/ReactClass type, [object props], [children ...] ) 

Basically your JSX is moving from

 <div style="color: white;"> <div></div> </div> 

to

 React.createElement('div', { style: { color: 'white' } }, [ React.createElement('div', {}, []) ]) 

For the same reason, you cannot pass a loop to a parameter in a function, you cannot put a loop in JSX. It would look like

 React.createElement('div', { style: { color: 'white' } }, [ React.createElement('div', {}, for (;;) <div></div>) ]) 

which makes no sense at all, because you cannot pass a for loop as a parameter. On the other hand, calling the map returns an array, which is the correct type for the third parameter of React.createElement.

The response is still the dom virtual library at the end of the day, but JSX just makes it more familiar to write. hyperscript is another good example of the vdom library, but where JSX not standard. Their README example is similar to what React would look like without JSX:

 var h = require('hyperscript') h('div#page', h('div#header', h('h1.classy', 'h', { style: {'background-color': '#22f'} })), h('div#menu', { style: {'background-color': '#2f2'} }, h('ul', h('li', 'one'), h('li', 'two'), h('li', 'three'))), h('h2', 'content title', { style: {'background-color': '#f22'} }), h('p', "so it just like a templating engine,\n", "but easy to use inline with javascript\n"), h('p', "the intension is for this to be used to create\n", "reusable, interactive html widgets. ")) 

Answer 2

In your JSX, you cannot have a for loop. Therefore, even if you have {} around the for loop, this will not work. Use a card instead, as shown in the code below. Assuming your data socials is an array , not just an object.

If socials is an object, you need to use Object.keys(socials).map(function(key)){}

 class App extends React.Component { render() { let socialBar = null; let socials = [{ foo: 'http://foo' }] if (socials) { socialBar = <div className='align-bottom text-center'> <ul className='list-inline social-list mb24'> {socials.map(function(social, index) { return <li key={index}> <a alt={index} href={social.foo}>{ social.foo }</a> </li> }) } </ul> </div> } return ( <div>{socialBar}</div> ) } } ReactDOM.render(<App/>, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script> <div id="app"></div>