CODEWITHSUNDEEP
javascriptreactjscomponentsstyled-components
xgyrosx
xgyrosx

Reputation: 23

ReactJS: How can I pass a string to use as a function name?

I'm building a menu with React. How can I pass a string to a component to use it as a function name?

What's working:

<Link to={ROOM({ roomId })}>home</Link>

I'm refactoring the components now. I have a component MobileMenu with the Link defined as:

  <MobileMenuLink service={'ROOM'} />

In a second component I've defined the MobileMenuLink as:

const MobileMenuLink = ({ style, className, roomId, service }) => {
  return (
    <Base style={style} className={className}>
      <MenuLink>
        <Link to={service({ roomId })}>home</Link>
      </MenuLink>
    </Base>
  )
}

How is this possible?

Upvotes: 1

Views: 945

Answers (1)

Ori Drori
Ori Drori

Reputation: 192422

Don't pass a string, pass the ROOM function to MobileMenuLink:

<MobileMenuLink service={ROOM} />

And call service as you do now, because it's a function:

<Link to={service({ roomId })}>home</Link>

Upvotes: 3

Related Questions