Reflux store data rendering with line breaks and tag interpolation ES5

Question

I do not want to use Babel/ES6 yet because reasons. I have been watching the egghead.io videos on react/reflux and have a component here I am rendering. It connects to the randomuser API and pulls 10 users into the store, when the store is updated it renders the user data onto the page. With the ES6 code shown in the video it allows nice interpolation of tags, so that but in my case I am just using lodash as _.map which operates slightly differently, and I am unable to find a way to render tag interpolation or even line breaks, as React renders out the elements as all children of one parent tag contained inside its own span tags.

The rendered code looks like this:

and my code is here: var React = require('react'); var Reflux = require('reflux'); var request = require('superagent'); var _ = require('lodash');

var store = Reflux.createStore({

    data: {users:[]},
    init: function(){
        request
            .get("http://api.randomuser.me/?results=10")
            .end(function(err,res){
                if(err){
                    console.log(err)
                }else {
                   var FirstName = res.body.results[0].user.name.first;
                    var LastName = res.body.results[0].user.name.last;
                    var picture = res.body.results[0].user.picture.thumbnail;                        
                    store.trigger({users:res.body.results})
                }
            });
    },
    getInitialState(){
        return this.data;
    }
});

var Name = React.createClass({
    mixins:[Reflux.connect(store)],
    render: function(){
        return(
            <div>
            {_.map(this.state.users,function(n){
                fName=n.user.name.first
                lName=n.user.name.last
                picture = n.user.picture.thumbnail;
                return ""+fName+" "+lName + " " + picture
            })
            }
                </div>
        )
    }
});
React.render(<Name />, document.getElementById('users'));

Any suggestions or advice would be greatly appreciated! also the egghead.io videos are top notch, i must give credit where it is due!

Answer 1

Personally, I try to avoid doing interpolation in JSX tags. JSX gives you a pretty solid API for constructing DOM elements! In this case, I'd do something like this:

render: function() {
  var userElements = _.map(this.state.users,function(n){
      var fName=n.user.name.first
      var lName=n.user.name.last
      var pictureURL = n.user.picture.thumbnail;
      return (
        <div className='user'>
          <span className='first-name'>{fname}</span>
          <span className='last-name'>{lname}</span>
          <img className='picture' src={pictureURL}></img>
        </div>
      )
   })

  return (
            <div className='user-container'>
              {userElements}
            </div>
          )

}