Frank Mendez Frank Mendez - 4 years ago 174
React JSX Question

Uncaught ReferenceError: roleLength is not defined at Role.render

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 Source

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>
    );
  }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download