Breaking News: Grepper is joining You.com. Read the official announcement!

How to render react-icon depending on String from Database?

Loki Chaulagain answered on December 1, 2022 Popularity 1/10 Helpfulness 1/10

answer How to render react-icon depending on String from Database?

How to render react-icon depending on String from Database?

Comment

import React from "react";
import "./styles.css";
import * as Icons from "react-icons/fa";

/* Your icon name from database data can now be passed as prop */
const DynamicFaIcon = ({ name }) => {
  const IconComponent = Icons[name];

  if (!IconComponent) { // Return a default one
    return <Icons.FaBeer />;
  }

  return <IconComponent />;
};

export default function App() {
  return (
    <div className="App">
      <DynamicFaIcon name="FaAngellist" />
      <DynamicFaIcon />
    </div>
  );
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: www.appsloveworld.com

Tags: javascript render string

Link to this answer
Share Copy Link