How to loop inside map function using jsx format React JS

Question

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:

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)

Here is the error:

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

Why are you using a ternary instead of a normal if statement. You're in a normal function already. Also as a protip: don't invent functions inline: give your class normal functions and then have a nice, legible, render() function that contains ......<td>{ this.getGroupMembers() }</td>...... -- move as much code to outside of the render function, because future-you will be much better able to maintain current-you's code. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Feb 7, 2017 at 5:38
Ternary Operator does the same job as that of if else statements but using one statement code so it reduces Line of code (LOC). — Frank Mendez
– Frank Mendez, Commented Feb 7, 2017 at 5:42
sure, and is nowhere near as legible to anyone who has to maintain your code, including future you, except when used for assignment. This is normal function code, it should be in its own function, written out normally. LOC are a nonsense measure because it's 2017 and we have minifiers. The "number of lines of code" you write has zero value when your users get what comes rolling out of a minified bundling operation. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Feb 7, 2017 at 17:03

Mayank Shukla · Accepted Answer · 2017-09-08 10:03:14Z

You are using the ternary operator in a wrong way, Syntax is:

condition ? expression :  expression

Both values should be expression but you are using return statement, that's why it is throwing the error.

If you want to return the result then use it in this way:

return a ? a+1 : 0;

Didn't run this code, just made some changes to solve your original problem, please check the proper closing of braces and tags, Try this:

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

Collectives™ on Stack Overflow

How to loop inside map function using jsx format React JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related