How to render component which store in object for Reactjs - reactjs

Question

I have few components import into this file. It will render it depending if match the roles.
As example, we have "A" role in this user. It should render AdminDashboard and CustomerDashboard. How to do in this way if I save details in DashboardComponents Object and try to render component if filter matched my condition.
I will pass into the props into the component too.
import AdminDashboard from "../AdminDashboard";
import ProjectDashboard from "../ProjectDashboard";
import CustomerDashboard from "../CustomerDashboard"
const DashboardComponents = [
{ id: 1, component: AdminDashboard, roles: [ "A" ] },
{ id: 2, component: ProjectDashboard, roles: [ "C", "D" ] },
{ id: 3, component: CustomerDashboard, roles: [ "A", "B" ] },
]
const DashboardComponent = () => {
/**
I tried use React.cloneElement for component Dashboard which from DashboardComponents.
it can't be render.
**/
return (
/** render the match DashboardComponents with props data={ data } in here **/
)
}
I knew we can do it in this way. but it look messy for me if I have 10 Dashboard.
import AdminDashboard from "../AdminDashboard";
import ProjectDashboard from "../ProjectDashboard";
import CustomerDashboard from "../CustomerDashboard"
const DashboardComponent = () => {
return (
<>
{
condition === "A" && (
<AdminDashboard data={ data } />
)
}
{
condition === "A" && (
<ProjectDashboard data={ data } />
)
}
{
condition === "A" && (
<CustomerDashboard data={ data } />
)
}
</>
)
}

Answer 1

You can try:
const AdminDashboard = ({data}) => {
return (
<div>
AdminDashboard: {data}
</div>
)
}
const ProjectDashboard = ({data}) => {
return (
<div>
ProjectDashboard: {data}
</div>
)
}
const CustomerDashboard = ({data}) => {
return (
<div>
CustomerDashboard: {data}
</div>
)
}
const DashboardComponents = [
{ id: 1, component: AdminDashboard, roles: [ "A" ] },
{ id: 2, component: ProjectDashboard, roles: [ "C", "D" ] },
{ id: 3, component: CustomerDashboard, roles: [ "A", "B" ] },
]
export default function App() {
const condition = 'A';
let dash_role = DashboardComponents.filter(dc => dc.roles.indexOf(condition) > -1);
return dash_role.map(
dr => {
const Comp = dr.component;
return (
<Comp
key={dr.id}
data={`data_props ${dr.id}`}
/>
)
}
)
}
And if you want to use React.cloneElement:
// add onPress for who you want
const ProjectDashboard = ({data, onPress}) => {
return (
<div>
ProjectDashboard: {data}
<button onClick={() => onPress(data)}>Click!</button>
</div>
)
}
export default function App() {
const condition = 'A';
let dash_role = DashboardComponents.filter(dc => dc.roles.indexOf(condition) > -1);
const onPress = data => {
alert(data);
}
return dash_role.map(
dr => {
const Comp = dr.component;
const child = (
<Comp
key={dr.id}
data={`data_props ${dr.id}`}
/>
);
return React.cloneElement(child, { onPress});
}
)
}

Answer 2

As your role "A" have 2 dashboards so I am supposing you only want to access one dashboard at time. So I have written code of it and you have to pass the role name in find function it will fetch the component for it.
import AdminDashboard from "../AdminDashboard";
import ProjectDashboard from "../ProjectDashboard";
import CustomerDashboard from "../CustomerDashboard"
const DashboardComponents = [
{ id: 1, component: AdminDashboard, roles: [ "A" ] },
{ id: 2, component: ProjectDashboard, roles: [ "C", "D" ] },
{ id: 3, component: CustomerDashboard, roles: [ "A", "B" ] },
]
const DashboardComponent = () => {
const find=(role)=>DashboardComponents.filter((item)=>item.roles.includes(role));
return (
<>
{find('A')?.[0]?.component(data)} {/* pass data as props to that component */}
</>
)
}