Reactjs - 访问对象值而不重复映射循环

Question

如何访问对象数据并在React中呈现它而不必通过map（）函数重复循环它？我想要一些像this.state.profile.first_name这样简单的东西，因为数据将作为JSON对象出现。每次我需要访问数据值时，我都不想在地图上循环。

getInitialState: function() {
        return ({
               profile: []
           });
        },
componentDidMount: function() {
        var self = this;
        $.get("/profile/"+ id, function(result){
            self.setState({
                profile: result
            })
        }) 
},

render: function(){         
    var header = React.createElement(
            'div', 
            {className: 'profile_header'},
            this.state.profile.map(item=>
                item.first_name +' '+ item.last_name
            ));

    var profile = React.createElement(
            'div', 
            {className: 'profile_main'}, 
            this.state.profile.map(item =>
                // would like to do something like 
                // <span>DOB:</span> item.dob <br />
                // <span>Gender:</span> item.gender <br />
            ));

    return React.createElement(
            'div',
             {className: 'profile-display'},
                 header,
                 profile
             );

}