Dynamically paste value in dot notation in react component

user_9839536 0
Viewed 207

I'm trying to use the React-NBA-Logos package(npm link) in a small project and faced a question. According to the documentation here is an example of this package use

import React from 'react';
import * as NBAIcons from 'react-nba-logos';

const Example = () => {
  return <NBAIcons.TOR />; // Loads the Toronto Raptors logo
};

export default Example;

The question is it possible to paste a variable with a dynamic string value(with some correct tripcode) here? Something like this

const Example = () => {
  const NEW_VAR = 'NYK';
  return <NBAIcons.NEW_VAR />;
};
reactjs
2 Answers

You can get around this by creating an alias for the component.

const Example = () => {
  const NEW_VAR = 'NYK';
  const Component = NBAIcons[NEW_VAR];
  return <Component />;
};
user_132459410

A functional approach would work well here:

function NBAIcon (name, props = {}) {
  const Icon = NBAIcons[name];
  return <Icon {...props} />;
}

function Example () {
  return (
    <ul>
      <li>{NBAIcon('TOR')}</li>
      <li>{NBAIcon('ATL', {size: '64px'})}</li>
    </ul>
  );
}
user_4382730
Related