Uncaught ReferenceError: roleLength is not defined at Role.render

Question

Hello I need help in react rendering. When I first go to /roles the const roleLength = this.props.roles.length > 0; is still defined. However when i created and re route it to /addRole after I submitted to /role the Uncaught ReferenceError: roleLength is not defined at Role.render

    import { getRoles } from '../../actions/roleActions'
    import { refreshToken } from '../../actions/authActions'
    import { connect } from 'react-redux'
    import _ from 'lodash'
    import { Link } from "react-router"



    class Role extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          roles: []
        };
      }

      componentWillMount(){
        this.props.getRoles().then(() => {
          console.log('this role props: ', this.props)
          if(this.props.errors.code === 'UNAUTHORIZED'){
            this.props.refreshToken().then(() => {
              this.props.getRoles()
            })
          }
        })
      }

      render(){

        const roleArr = _.valuesIn(this.props.roles)
        const roleLength = this.props.roles.length > 0;
        return (
          <div>
            <Link className="add-btn btn btn-success" to="/addRole" ><i className="fa fa-plus"></i>Add Role</Link>
            <h1>Roles</h1>
            <table className="table table-responsive table-bordered">
              <thead>
                <tr>
                  <td>Name</td>
                  <td>Created At</td>
                  <td>Action</td>
                </tr>
              </thead>
              <tbody>
                { roleLength ? (
                  roleArr.map((roles, i) => {
                    return (
                      <tr key={i}>
                         <td>{roles.name}</td>
                         <td>{roles.createdAt}</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>
                         </td>
                     </tr>
                   );
                 })) : (<tr>No Roles Found</tr>)
                }
              </tbody>
            </table>
          </div>
        );
      }
    }

    Role.propTypes = {
      getRoles: React.PropTypes.func.isRequired,
      errors: React.PropTypes.object.isRequired,
      refreshToken: React.PropTypes.func
    }

    Role.contextTypes = {
      router: React.PropTypes.object.isRequired
    }

    function mapStateToProps(state) {
      return{
        roles: state.roleReducer.roles,
        links: state.roleReducer.links,
        errors: state.roleReducer.errors
      }
    }

    export default connect(mapStateToProps, { getRoles, refreshToken })(Role)

Here is my Add Role code:

    this.props.postRole(this.state).then(() => {
        if(this.props.errors.message){
          this.setState({errors: this.props.errors, isLoading: false});
        }else{
          this.context.router.push('/roles')
        }
      }
    );

I was wondering if this has something to do with componentWillMount() You suggestions and answers are highly appreciated. Thank you

PS: The data was Created though

Answer 1

The error may arise because this.props.roles itself may be undefined. Try this

render(){

    const roleArr = _.valuesIn(this.props.roles)

    return (
      <div>
        <Link className="add-btn btn btn-success" to="/addRole" ><i className="fa fa-plus"></i>Add Role</Link>
        <h1>Roles</h1>
        <table className="table table-responsive table-bordered">
          <thead>
            <tr>
              <td>Name</td>
              <td>Created At</td>
              <td>Action</td>
            </tr>
          </thead>
          <tbody>
            { this.props.roles ? (
              roleArr.map((roles, i) => {
                return (
                  <tr key={i}>
                     <td>{roles.name}</td>
                     <td>{roles.createdAt}</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>
                     </td>
                 </tr>
               );
             })) : (<tr>No Roles Found</tr>)
            }
          </tbody>
        </table>
      </div>
    );
  }
}