Render React component from array values

Question

I'm working on React with Symfony API and when I connect to my app, I've got a role defined by Symfony

It returns this if I'm an admin : ["ROLE_USER", "ROLE_ADMIN"]

It returns this if I'm a moderator : ["ROLE_USER", "ROLE_MODERATOR"]

It returns this if I'm a user : ["ROLE_USER"]

Currently my code is working fine and if I'm a user, it shows the user view, if I'm a moderator it shows the moderator view etc. So my question is : Is there a better way to create a condition that will render the good component in function of my user role ?

render()
  {
      let content = "";
      if (this.props.auth.user.roles.includes("ROLE_ADMIN")) {
          content = <NavAdminDashboard />;
      } else if (this.props.auth.user.roles.includes("ROLE_MODERATOR")) {
          content = <NavModeratorDashboard />;
      } else {
          content = <NavUserDashboard />;
      }

      return (
          <Fragment>
              {content}
          </Fragment>
      )
  }

I have checked this : Render component based on a variable - reactjs

It is better than my code but it only works if my roles render as string and not as array like my code.

IMO what you have written is proper way of doing, later on when you need some condition checks than it will be easy to handle with such structure — Code Maniac
– Code Maniac, Commented Apr 10, 2019 at 17:00

Ertan Hasani · Accepted Answer · 2019-04-10 18:29:56Z

2

You can achieve this in two ways

The first one is a little cleaner.

render(){
    const {roles} = this.props.auth.user;

    return (
        <React.Fragment>
            { roles.include("ROLE_ADMIN") && <NavAdminDashboard /> }
            { roles.include("ROLE_MODERATOR") && <NavModeratorDashboard  /> }
            { !roles.include("ROLE_ADMIN") && !roles.include("ROLE_MODERATOR) && <NavUserDashboard  /> }
        </React.Fragment>
    )
}

You can also do that by creating two methods isAdmin and isModerator:

isAdmin = () => {
    return this.props.auth.user.roles.include("ROLE_ADMIN");
}

isModerator = () => {
    return this.props.auth.user.roles.include("ROLE_MODERATOR");
}

render() {
    return (
        <React.Fragment>
            { this.isAdmin() && <NavAdminDashboard /> }
            { this.isModerator() && <NavModeratorDashboard  /> }
            { !this.isAdmin() && !this.isModerator() && <NavUserDashboard  /> }
        </React.Fragment>
    )
}

Or you can add a isUser method to check if its only user


isUser = () => {
    const {roles} = this.props.auth.user;
    return roles.include("ROLE_USER") && roles.length === 1;
}

render() {
    return (
        <React.Fragment>
            { this.isAdmin() && <NavAdminDashboard /> }
            { this.isModerator() && <NavModeratorDashboard  /> }
            { this.isUser() && <NavUserDashboard  /> }
        </React.Fragment>
    )
}

answered Apr 10, 2019 at 18:29

Ertan Hasani

1,78316 silver badges27 bronze badges

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

1 Comment

Bambou Over a year ago

Thanks for your answer and sorry for the delay, I'm from France haha. I think that'll be easier from what I did, thanks !

amcdrmtt · Accepted Answer · 2019-04-10 16:52:21Z

2

I think your code is fine and doesn't necessary need to change. But I personally move the role logic either to external functions (that can be unit tested) or methods on the component. Eg:

get isAdmin() {
  return this.props.roles.include('ADMIN');
}

get isUser() {
  return !this.props.roles.some(role => role !== 'USER');
}

render() {
  return <>
    {this.isAdmin && <Admin />}
    {this.isUser && <User />}
  </>
}

Another alternative is to move the parsing of roles to a helper function and map the array to props. Eg:

<Component isAdmin={hasAdminRole(roles)} />

Both of these are nicer solutions if you ask me. But in the end, as long as the code works it might be good enough. You can always go back and refactor later.

answered Apr 10, 2019 at 16:52

amcdrmtt

1,25312 silver badges13 bronze badges

1 Comment

Bambou Over a year ago

Thanks for your answer and sorry for the delay, I'm from France haha. The answer of "Ertan Hasani" was the solution I expected (don't know why I didn't think of this idea) but you're answer is also really nice, +1 :)

Collectives™ on Stack Overflow

Render React component from array values

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related