Conditional rendering of showing / hiding a button - ReactJs

Question

I am trying to hide a menu button if there is . Baiscly if the user is not allowed to see the menu i receive an empty rol from the token ( basicly rol : [''] , otherwise if it is allowed is rol : ['_DECLARATION']. I have tried with a conditional rendering but maybe i am mistaken of my methods that i use. If somebody could give a hand would be very nice .

 constructor(props) {
        super(props);
        this.state = {
                roles: '' 
                     }

async componentDidMount() {
const base64Url = token.split('.')[1];
const decodedValue = JSON.parse(window.atob(base64Url))
const roles = decodedValue.roles;

 render() {
 const { roles } = this.state
    return (

        { roles 
        ? <Button className="emptyRollButtonDec"/>
        : <Button
          onClick={this.changeActiveComponent
          style= {{
              background: branding.color.colorPrimary,
              color: branding.color.colorTextPrimary
                  }}>
           Declaration
           </Button>
         }

I dont know and i dont understand where i am wrong .

@Andy this is the answer if you want write it down and i can mark it as right . Thank you mate ! Cheers ! — PandaMastr
– PandaMastr, Commented Aug 28, 2019 at 9:45
add roles && roles.length===0 in condition. By this you also check that roles is defined or not — Pardeep Sharma
– Pardeep Sharma, Commented Aug 28, 2019 at 9:46
OP, is there a section of your code missing (in the componentDidMount?) — Andy
– Andy, Commented Aug 28, 2019 at 10:03

Andy · Accepted Answer · 2019-08-28 09:49:45Z

2

You've defined roles in state as a zero length string. This means that it is defined, not undefined, when you destructure it from the state in your render method. This means that you can't use your existing ternary check because roles ? something : somethingelse checks to see if roles is defined or not.

To correct this check the length of roles instead. If it is zero return the empty button, otherwise show the active button:

!roles.length ? showEmptyButton : showActiveButton

answered Aug 28, 2019 at 9:49

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pardeep Sharma Over a year ago

Your explanation is not correct. this is not because of 0 length string is defined. your ans is correct because latest value in roles is array and when we check roles.length than it is true in case of roles is get from url

Andy Over a year ago

There's a section of the OP's code missing - there is no setState where roles is changed to an array. I'm basing my answer of the code in the question.

Dacre Denny · Accepted Answer · 2019-08-28 09:54:52Z

First, be sure to update the roles state of your component using setState(). In the case of your component, you could do that in the componentDidMount() life-cycle hook:

/* Remove async from method signature as it's not needed */
componentDidMount() {
  const base64Url = token.split('.')[1];
  const decodedValue = JSON.parse(window.atob(base64Url))
  const roles = decodedValue.roles;

  /* Very important - this will trigger a re-render for your
  component which will ensure that the subsequent render is
  done so with the updated roles state in effect */
  this.setState({ roles : roles });
}

Next, you need to ensure that the your conditional role-based rendering is based on boolean represnetation of the roles state of the component. As I understand from your question, the empty roles button is shown if the roles state is either '' or ['']:

render() {
    const { roles } = this.state;

    /* If roles is falsey, or first element of roles array 
    is falsey then show empty button */       
    const isEmptyRole = !roles || !roles[0];

    return isEmptyRole ? 
            <Button className="emptyRollButtonDec" /> : 
           (<Button
            onClick={this.changeActiveComponent}
            style={{
                background: branding.color.colorPrimary,
                color: branding.color.colorTextPrimary
            }}>Declaration</Button>) : 
           ;
    }
}

Collectives™ on Stack Overflow

Conditional rendering of showing / hiding a button - ReactJs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related