show reactjs icons dynamically icon names picking from JSON file

Question

I'm having following json file, which I keep Id,Intro, Icon name

[
    {
        "id" : 7,
        "intro": "intro_7",
        "icon" : "ArrowRight"
       
    },
    {
        "id" : 8,
        "intro": "intro_8",
        "icon" : "Alarm"
    }
]

I'm using React-Bootstrap-Icons in my reusable card component as following

import "./bootstrap.min.css";
import * as Icon from './react-bootstrap-icons';

const Card = props =>{
    return(
     <div className="card text-center">
         <div className="card-body text-dark">
         
           <Icon.Alarm></Icon.Alarm>
            <h4 className="card-title">
                {props.intro}
            </h4>
         </div>
     </div>
    )
}

export default Card;

this is how I looping the json file and show cards

import Card from './card';
import CardData from './data.json';

class Cards extends Component {
    render() { 
      return ( 
      <div className="container-fluid d-flex justify-content-center">
          <div className="row">
              {
                CardData.map(({ id, icon, intro }, index) => (
                  <div key={title + index}>
                    <Card 
                    id={id} 
                    icon={icon} 
                    intro={intro} 
                   />
                  </div>
                  )
                )
              }
          </div>
      </div> 
      );
    }
  }
 
export default Cards;

but I want to take this to next level which is to show the Icons dynamically, that taking from json file, currently, it's static.

so I just try to put it like this

import React from 'react';
import "./bootstrap.min.css";
import * as Icon from './react-bootstrap-icons';   


const Card = props =>{
    return(
     <div className="card text-center">
         <div className="card-body text-dark">
         
           <Icon.+{props.icon}></Icon.+{props.icon}>
            <h4 className="card-title">
                {props.intro}
            </h4>
         </div>
     </div>
    )
}

export default Card;

but it's showing compilation errors in the first place. may I know is there any approach to achieve this

score 4 · Accepted Answer · answered Jan 04 '21 at 02:16

4

you are importing an object of icons. you can destructure your Icon first from icons based on props.icon, then call it:

import * as Icons from 'react-bootstrap-icons';

const Card = props =>{
  const { [props.icon]: Icon } = Icons
    return(
     <div className="card text-center">
         <div className="card-body text-dark">
         
           <Icon></Icon>
            <h4 className="card-title">
                {props.intro}
            </h4>
         </div>
     </div>
    )
}

answered Jan 04 '21 at 02:16

buzatto

9,704
5
24
33

I tried to put this approach but ended up with the following error `Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Card`.` – Kelum Jan 04 '21 at 02:25
1

that's because you are not passing props.icon or you are passing an invalid name – buzatto Jan 04 '21 at 02:30
actually I exported it, like this `CardData.map(({ id, icon, intro }, index) => (

) )` – Kelum Jan 04 '21 at 02:31
its working, I messed up the order, thanks :) – Kelum Jan 04 '21 at 02:37

score 0 · Answer 2 · answered Jan 04 '21 at 02:09

you can using react html parser or html-react-parser, for display icon

react-html-parser

import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
 
class HtmlComponent extends React.Component {
  render() {
    const html = '<div>Example HTML string</div>';
    return <div>{ ReactHtmlParser(html) }</div>;
  }

html-react-parser

import parse from 'html-react-parser';
<ul>
  {parse(`
    <li>Item 1</li>
    <li>Item 2</li>
  `)}
</ul>

show reactjs icons dynamically icon names picking from JSON file

2 Answers2