Как петля внутри функции карты с использованием формата jsx React JS

Question

Мне нужна помощь в рендеринге моего массива. Я хочу сделать условие внутри моей функции карты. Но как-то мой transpiler не принимать и с разбора ошибки Вот мой код:

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(() => { 
     console.log('this groups props: ', this.props) 
     if(this.props.errors.code === 'UNAUTHORIZED'){ 
     this.props.refreshToken().then(() => { 
      this.props.getGroups() 
     }) 
     } 
    }) 
    } 

    render(){ 

    const groupArr = _.valuesIn(this.props.groups) 

    return (
     <div> 
     <h1>Groups</h1> 
     <table className="table table-responsive table-bordered table-condensed"> 
      <thead> 
      <tr> 
       <td>Name</td> 
       <td>Queue</td> 
       <td>Created At</td> 
       <td>Execution Type</td> 
       <td>Members</td> 
       <td>Action</td> 
      </tr> 
      </thead> 
      <tbody> 
      {this.props.groups ? (groupArr.map((groups, i) => { 
       return (
        <tr key={i}> 
        <td>{groups.name}</td> 
        <td>{groups.queue}</td> 
        <td>{groups.createdAt}</td> 
        <td>{groups.executionType}</td> 
        <td> 
         {groups.members ? (groups.members.map((members, index) => { 
         {members.type === 'command' ? (
          return (<div className="alert alert-success" role="alert" key={index}>{members._id}</div>) 
         ) : (
          return (<div className="alert alert-danger" role="alert" key={index}>{members._id}</div>) 
         ) } 
         })) : (return ('No members found'))} 
        </td> 
        <td> 
         <Link className="btn btn-sm btn-warning" > 
         <i className="fa fa-pencil"></i> 
         </Link> 
         <button className="btn btn-sm btn-danger"> 
           <i className="fa fa-trash-o"></i> 
         </button> 
         <button className="btn btn-sm btn-success"> 
           <i className="fa fa-play-circle"></i> 
         </button> 
        </td> 
        </tr> 
       ) 
      })) : (<tr>No records found</tr>)} 
      </tbody> 
     </table> 
     </div> 
    ); 
    } 

} 

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) 

Здесь ошибка:

 
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 |      ) } 

Answer 1

Вы используете ternary operator в неправильном направлении, Синтаксис:

condition ? expression : expression 

Оба значения должны быть выражением, но вы используете return заявления, поэтому он бросает ошибку.

Если вы хотите, чтобы вернуть результат затем использовать его таким образом:

return a ? a+1 : 0; 

Не запустить этот код, только что сделал некоторые изменения, чтобы решить исходную проблему, пожалуйста, проверить правильность закрытия braces и tags, попробуйте следующее:

{ 
    this.props.groups ? groupArr.map((groups, i) => { 
     return (
      <tr key={i}> 
       ..... 
       <td> 
        { 
         groups.members ? 
          groups.members.map((members, index) => { 
           return members.type === 'command' ? 
            <div className="alert alert-success" role="alert" key={index}>{members._id}</div> 
           : 
            <div className="alert alert-danger" role="alert" key={index}>{members._id}</div> 
          }) 
         : <div>'No members found'</div> 
        } 
       </td> 
       ..... 
      </tr> 
     ) 
    }) : <tr> No records found </tr> 
}