javascript - Method Expression is not of function type (equals on a state propertyvalue) - React JS - Stack Overflow

I'm currently trying to do conditional statements which allow me to display the divs according to the User's role. First I call for the role and set it to the state value.

The sets are fine as I can view in the dev tools console. However when I try to do the following conditional check on a constant which is a string:

props = {
     subRole = ''
}


{(!this.state.AdminRole && subRole.toString() === READ_ONLY (
       //div goes here
))}

Then I get:

  Object(...) is not a function

on the subRole.toString() === READ_ONLY check and Webstorm is telling:

  method expression is not of function type

I'm currently trying to do conditional statements which allow me to display the divs according to the User's role. First I call for the role and set it to the state value.

The sets are fine as I can view in the dev tools console. However when I try to do the following conditional check on a constant which is a string:

props = {
     subRole = ''
}


{(!this.state.AdminRole && subRole.toString() === READ_ONLY (
       //div goes here
))}

Then I get:

  Object(...) is not a function

on the subRole.toString() === READ_ONLY check and Webstorm is telling:

  method expression is not of function type

• javascript
• reactjs

Share Improve this question Follow edited Aug 26, 2018 at 9:14 Timisorean 1,51677 gold badges2222 silver badges3131 bronze badges asked Aug 26, 2018 at 8:59 RollingStonesRollingStones 3311 gold badge11 silver badge44 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You have declared subRole incorrectly. In object notation we use : for keys.

Please do the following changes first:

props = {
     subRole : ''
}

If you want to initialize default props:

// for example your ponent is App.js

App.defaultProps = {
  roles : {
    subRole: 'c'
  }
};

Later you can access this in your ponent like:

this.props.roles.subRole

This is the remended way but usually we don't use default props, instead we are more concerned with the ponent's default state.

READ_ONLY is being called as a method which is why you get the error. Add && before rendering element:

{(!this.state.AdminRole && subRole.toString() === READ_ONLY && (
       //div goes here
))}

Also, Fix =

props = {
     subRole : ''
}