CODEWITHSUNDEEP
javascriptreactjsredux
Serenity
Serenity

Reputation: 4054

render component based on the id of user

There are four entities in my application. Each entity has their own role. if the id of user is 1, the page should show entity1 component and if the id of user is 2, the page should show entity2. I could show this but could not pass props doing my way.

Here is what i have done 

const userTypes = [
  { id: '1', val: <Entity1 /> },
  { id: '2', val: <Entity2 /> },
  { id: '3', val: <Entity3 /> },
  { id: '4', val: <Entity4 /> }
];

const renderComponent = props => {
  const component = userTypes.filter(x => x.id === props.user.id);
  if (component) {
    return component[0].val;
  } else {
    return <div>can't get route. unknown issue.</div>;
  }
};

export default renderComponent;

This way i cant pass props

Upvotes: 0

Views: 70

Answers (1)

hsz
hsz

Reputation: 152206

Try with:

if (component) {
  const Component = component[0].val;
  return <Component />;
} else {
  return <div>can't get route. unknown issue.</div>;
}

Upvotes: 1

Related Questions