Yashua Yashua - 1 year ago 679
React JSX Question

JSX for...in loop

Given this object:

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

I want to loop through it in JSX. This works:

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

But this doesn't (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)
<a alt={social} href={socials[social]}>{ social }</a> // social is undefined

What is the reason
is undefined in the 2nd example? I assume there is a scoping issue with the inner brackets but I have not been successful fixing it.

I can do do a
with object keys and do as in this post but that's not much different than my working example.

To be clear - I have it working, I simply wish to be clearer on the scoping problem (or syntax error if so) in my 2nd example.

Answer Source

JSX is just sugar that gets transpiled to a bunch of function calls of React.createElement, which you can find the docs for here: https://facebook.github.io/react/docs/top-level-api.html#react.createelement

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

Basically your JSX goes from

<div style="color: white;">


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

For the same reason you can't pass a loop to a parameter in a function, you can't put a loop into JSX.

React is like hyperscript in this way because it's a virtual dom library. A map call returns an array, which is the third parameter of React.createElement.

A for loop as a param is just broken syntax like

console.log(for (;;) console.log('hi'))

would be.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download