title: How to loop inside map function using jsx format React JS
body: <p>I need help in rendering my array I want to make a condition inside my map function. But somehow my transpiler is not the accepting and having parsing error
  Here is my code: </p>
  
  <pre><code>import { getGroups } from '../../actions/groupActions'
  import { refreshToken } from '../../actions/authActions'
  import { connect } from 'react-redux'
  import _ from 'lodash'
  import { Link } from "react-router"
  
  class Group extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        groups: []
      };
    }
  
    componentWillMount(){
      this.props.getGroups().then(() =&gt; {
        console.log('this groups props: ', this.props)
        if(this.props.errors.code === 'UNAUTHORIZED'){
          this.props.refreshToken().then(() =&gt; {
            this.props.getGroups()
          })
        }
      })
    }
  
    render(){
  
      const groupArr =  _.valuesIn(this.props.groups)
  
      return (
        &lt;div&gt;
          &lt;h1&gt;Groups&lt;/h1&gt;
          &lt;table className="table table-responsive table-bordered table-condensed"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;td&gt;Name&lt;/td&gt;
                &lt;td&gt;Queue&lt;/td&gt;
                &lt;td&gt;Created At&lt;/td&gt;
                &lt;td&gt;Execution Type&lt;/td&gt;
                &lt;td&gt;Members&lt;/td&gt;
                &lt;td&gt;Action&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              {this.props.groups ? (groupArr.map((groups, i) =&gt; {
                  return (
                    &lt;tr key={i}&gt;
                      &lt;td&gt;{groups.name}&lt;/td&gt;
                      &lt;td&gt;{groups.queue}&lt;/td&gt;
                      &lt;td&gt;{groups.createdAt}&lt;/td&gt;
                      &lt;td&gt;{groups.executionType}&lt;/td&gt;
                      &lt;td&gt;
                        {groups.members ? (groups.members.map((members, index) =&gt; {
                          {members.type === 'command' ? (
                            return (&lt;div className="alert alert-success" role="alert" key={index}&gt;{members._id}&lt;/div&gt;)
                          ) : (
                            return (&lt;div className="alert alert-danger" role="alert" key={index}&gt;{members._id}&lt;/div&gt;)
                          ) }
                        })) : (return ('No members found'))}
                      &lt;/td&gt;
                      &lt;td&gt;
                        &lt;Link className="btn btn-sm btn-warning" &gt;
                          &lt;i className="fa fa-pencil"&gt;&lt;/i&gt;
                        &lt;/Link&gt;
                        &lt;button className="btn btn-sm btn-danger"&gt;
                                &lt;i className="fa fa-trash-o"&gt;&lt;/i&gt;
                        &lt;/button&gt;
                        &lt;button className="btn btn-sm btn-success"&gt;
                                &lt;i className="fa fa-play-circle"&gt;&lt;/i&gt;
                        &lt;/button&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
                  )
              })) : (&lt;tr&gt;No records found&lt;/tr&gt;)}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      );
    }
  
  }
  
  Group.propTypes = {
    getGroups: React.PropTypes.func.isRequired,
    errors: React.PropTypes.object.isRequired,
    refreshToken: React.PropTypes.func
  }
  
  Group.contextTypes = {
    router: React.PropTypes.object.isRequired
  }
  
  function mapStateToProps(state) {
    return{
      groups: state.groupReducer.groups,
      links: state.groupReducer.links,
      errors: state.groupReducer.errors
    }
  }
  
  export default connect(mapStateToProps, { getGroups, refreshToken })(Group)
  </code></pre>
  
  <p>Here is the error:</p>
  
  <pre>
  SyntaxError: C:/Users/Frank/Projects/crun_fe/src/js/react/components/group/Group.js: Unexpected token (55:26)
    53 |                       {groups.members ? (groups.members.map((members, index) => {
    54 |                         {members.type === 'command' ? (
  > 55 |                           return ({members._id})
       |                           ^
    56 |                         ) : (
    57 |                           return ({members._id})
    58 |                         ) }
  </pre>