Dynamically load svgs as components in react

Question

My issue is basically this: I have a bunch of svg images all stored in a .js file like this import React from 'react' export const React = () => export const Angular = () => export const JQuery = () => in another component I want to render correct image based on an array, so for instance I have: import {React,Angular,JQuery} from '../svgs' const images = [ 'React','React','JQuery','Angular','JQuery' ] no I want to render each image, actually to do something like this

images.map (image => )

JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

you have to make some changes in svgs.js as you are exporting a named constant React again so it will throw duplication error when you import it. import React from 'react' export const react = () => export const angular = () => export const jQuery = () => After that import them where you want import {react, angular, jQuery} from '../svgs' // don't use quotes as it represents string // const images = [ // 'react', 'angular', 'jQuery' // ] const images = [ react, angular, jQuery ] And last use them in jsx render() { return (

// use uppercase letter for React component {images.map((Image, index) => )}

) }