How to load React Component by variable?

Question

I have multiple components exported in a file 'buildings.js' For the sake of simplicity I'll just give a basic example

export const NewBuilding = () => {
  return (
    <div className="wrapper">New Building</div>
  )
}

export const Barracks = () => {
  return (
    <div className="wrapper">Barracks</div>
  )
}

Another component get the specific building component name by props. I need to render the building whose name matches the name in the props.

class BuildingContent extends React.Component {
  getComponent = () => {
    var name = this.props.content.name;
      // Here I want to access the component by variable
      // Like <Buildings[name] /> or anything similar that works. 
      // This obviously doesn't work
      //return <Buildings.Name /> 

      return <Buildings.Barracks />
  }

  render() {
    return (
      <div className='building-content-wrapper'>
        // Hardcoded for functionality
        <Buildings.NewBuilding />
      </div>
    )
  }
}

derFrosty · Accepted Answer · 2023-02-13 19:20:31Z

2

You can create an object of multiple Components and its key should be the name you are passing in props like

const allComponents = {
  newBuilding: NewBuilding,
  barracks: Barracks,
}
        
class BuildingContent extends React.Component {
  let name = this.props.content.name;
  let Building = allComponents[name];
            
  render() {
    return (
      <div className='building-content-wrapper'>
        <Building />
      </div>
    )
  }
}

edited Feb 13, 2023 at 19:20

derFrosty

5484 silver badges18 bronze badges

answered Feb 13, 2023 at 14:43

Bilal Nasir

2503 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

How to load React Component by variable?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related