Does React allow render component dynamically

Question

Let say I have a list of icons which should be shown on the page when data from api comes. It can be for example divs or svg other html code. Just for example it is img.

function Icon1() {
  return <img src="/link/to/image1.jpg" />
} 

function Icon2() {
  return <img src="/link/to/image2.jpg" />
} 

class IconLoader extends Component {
  render() {
    let image = 'Icon' + this.props.image;
    return <{image} />;
  }
}

Than i want something like this:

function Some() {
  return <div><IconLoader image="1" /><IconLoader image="2" /></div>
}

All my tries comes to fail React produce error:

The tag <Icon1> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter

or just print tagname instead of rendering it...

Solution like "put all your components into array" unacceptable according to count of that icons

this is not a good practice, the question is why you need to do this?, if you want load code from some api you can always try this: https://stackoverflow.com/questions/37337289/react-js-set-innerhtml-vs-dangerouslysetinnerhtml — crizcl, Feb 24 '21 at 12:58
@crizcl Main reason - that data comes from API. which has admin panel, so data can change. And i do not want html from that API. html & design things should be inside react application. So what the "good practice" for this ? — Subdigger, Feb 25 '21 at 05:43
no no, i didn't understand this xD, so you only want to render images dinamically?, i can help you out with a more detailed example if you want, i dont know if you get the idea with the 2 answes from the other mates, let me know if you solved your problem. — crizcl, Feb 25 '21 at 13:28
@crizcl i have already solutiion on switches (more than 1) ... but is not a solution, same with already provided here. but i want to , lets say, load components dynamically by something like this: function loadComp(compName, otherParams) { return } without listing all known components in the galaxy to some magic list (array or object or what else) — Subdigger, Feb 26 '21 at 06:42

score 0 · Answer 1 · answered Feb 24 '21 at 12:01

0

this wont work like this, you may have a object something like this:

const components = {
  Icon1: Icon1,
  Icon2: Icon2
}

let image = 'Icon' + this.props.image;

const Component = components[image];

return <Component />

On other hand, instead of having 2 components for separate Images, you can just use one component something like this:

<Image image={image} />

const Image = ({image}) => <img src={image === "1" ? "/link/to/image1.jpg" : "/link/to/image2.jpg" } />

answered Feb 24 '21 at 12:01

Yash Joshi

2,586
1
9
18

Solution like "put all your components into array" unacceptable according to count of that icons – Subdigger Feb 24 '21 at 12:13
Please try the second approach than, otherwise correct the question to specify more details. – Yash Joshi Feb 24 '21 at 16:39
for example there can be 20 or 40 different items. They are, for example svg code, or some html. so i want to have them in component to use directly. AND i also want it use by some mechanizm like described in question. – Subdigger Feb 25 '21 at 05:35
you can do that with a custom function, let me do an example, when i have it im gonna asnwer you here! – crizcl Feb 26 '21 at 12:59

score 0 · Answer 2 · answered Feb 24 '21 at 13:11

0

I like to use that apporach:

const Images = {
      "1": <img src="/link/to/image1.jpg" />,
      "2": <img src="/link/to/image2.jpg" />
    }

class IconLoader extends Component {
  render() {
    return Images[this.props.image];
  }
}

answered Feb 24 '21 at 13:11

Ar26

949
1
12
29

Does React allow render component dynamically

2 Answers2