how to render component from .map() in react

Question

So im trying to not duplicate code and probably over complicating this but im very curious if there is a way for a system like this to work

        <Drawer anchor="right" open={sideBarOpen} onClose={toggleSideBar}>
          <List className={classes.sideBar}>
            {[
              ["test1", <LockOpenIcon />],
              ["test2", <LockOpenIcon />],
              ["test2", <LockOpenIcon />],
            ].map(({ text, icon }, index) => (
              <Fragment key={index}>
                <ListItem button>
                  <ListItemIcon>{icon}</ListItemIcon>
                  <ListItemText primary={text} />
                </ListItem>
                <Divider />
              </Fragment>
            ))}
          </List>
        </Drawer

where I map over an array of pairs of [text, iconComponent] and then render the iconComponent in the following element. this is producing no errors (but also not rendering anything in the ) and if theres not a way then thats cool but any help would be appreciated.

T.J. Crowder · Accepted Answer · 2021-02-26 15:48:12Z

1

Yes, it's possible, and you've mostly done it right. You just used object destructuring ({text, icon}) where you should have used iterable destructuring ([text, icon]):

<Drawer anchor="right" open={sideBarOpen} onClose={toggleSideBar}>
    <List className={classes.sideBar}>
        {[
            ["test1", <LockOpenIcon />],
            ["test2", <LockOpenIcon />],
            ["test2", <LockOpenIcon />],
        ].map(([ text, icon ], index) => (
            <Fragment key={index}>
                <ListItem button>
                    <ListItemIcon>{icon}</ListItemIcon>
                    <ListItemText primary={text} />
                </ListItem>
                <Divider />
            </Fragment>
        ))}
    </List>
</Drawer>

However, if the values are hardcoded like that, you might consider abstracting the repeated part of that into its own component:

const MyListItem = React.memo(({text, icon}) => (
    <ListItem button>
        <ListItemIcon>{icon}</ListItemIcon>
        <ListItemText primary={text} />
    </ListItem>
));

(The React.memo is just because I figure this doesn't change unless text or icon changes.)

Then it's:

<Drawer anchor="right" open={sideBarOpen} onClose={toggleSideBar}>
    <List className={classes.sideBar}>
        <MyListItem text="test1" icon={<LockopenIcon/>} />
        <Divider />
        <MyListItem text="test2" icon={<LockopenIcon/>} />
        <Divider />
        <MyListItem text="test3" icon={<LockopenIcon/>} />
    </List>
</Drawer>

edited Feb 26, 2021 at 15:48

answered Feb 26, 2021 at 15:44

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

INuke Over a year ago

:facepalm: I was hoping it was not something that obvious haha anyways thanks for the help and advice I will defo move that into its own component.

Collectives™ on Stack Overflow

how to render component from .map() in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related