react convert strings to react components

Question

So this might be kinda weird, I have an array of strings and a bunch of React components as well. For example:

const str = ['server','volume','route']

const Server = () => 'This is a server'
const Volume = () => 'This is a server'

and so forth, you get the idea.

I am trying to map the str to matching react Components and return the components.

I know I can use a loop and a switch to check for each item and return the respective component, but is there any creative idea like this:

{str.map(Y => <Y />)}

Dupocas · Accepted Answer · 2019-08-29 15:02:10Z

2

Not a very common use case, but definitely possible. First turn all items into components

const data = const str = ['server','volume','route']
const components = data.map(x => props => <div {...props}>{x}</div>)

Now render each one

return components.map((Component, i) => <Component key={i} customProp='foo'/>)

answered Aug 29, 2019 at 15:02

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

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

Comments

Mohamed Ramrami · Accepted Answer · 2019-08-29 15:03:29Z

2

You will need to use an object as components map, something like this :

const componentsMap = {
  "server": Server,
  "route": Route,
  "volume": Volume
}

{str.map(key => {
  const TheComponent = componentsMap[key];
  return <TheComponent />
})}

answered Aug 29, 2019 at 15:03

Mohamed Ramrami

12.8k4 gold badges41 silver badges51 bronze badges

Collectives™ on Stack Overflow

react convert strings to react components

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related