显示/隐藏按钮的条件渲染 - 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 .

Answer 1

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

Answer 2

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