Question 73978 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Two errors when trying to render icons dynamically with React – Reactjs

I’m slightly baffled on why I’m unable to generate icons dynamically with the way I’ve setup my React component.

I’ve tried using both specific imports for each icon and importing them all at once, however, I keep receiving the same error:

RiSave3Fill /> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

and

RiSave3Fill /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

Here is my Buttons component where I’m trying to dynamically generate the icons for each button.

import React from 'react'
import { useState } from 'react';
import './buttons.scss';
// import * as icons from 'react-icons';
import {MdOutlineClose} from 'react-icons/md';
import { BsCameraVideo } from 'react-icons/bs'
import { TbRotate360, TbRotate2, TbRotateClockwise2 } from 'react-icons/tb';
import { RiSave3Fill } from 'react-icons/ri';

function Buttons(props) {
    return(
        <div className="menu__buttons-wrapper">
            {props.buttons.map((button, index) => {
                const BtnIcon = button.icon;
                
                return (
                    <button key={index}>
                        {<BtnIcon />}
                    </button>
                )
            })}
        </div>
    )
}

export default Buttons

This is the data structure of (props) in the button component

{
        type: "buttons",
        buttons: [
            {
                type: "camera",
                icon: "BsCameraVideo"
            },
            {
                type: "rotateCounterClockwise",
                icon: "TbRotate2"
            },
            {
                type: "rotate360",
                icon: "TbRotate360"
            },
            {
                type: "rotateClockwise",
                icon: "TbRotateClockwise2"
            },
            {
                type: "save",
                icon: "RiSave3Fill"
            },
            {
                type: "close",
                icon: "MdOutlineClose"
            },
        ]
    }
Tags:

2

Answers


  1. 0

    Replace this:

    import { RiSave3Fill } from "react-icons/Ri";
import { MdOutlineClose } from 'react-icons/Md';

    With this:

    import { RiSave3Fill } from "react-icons/ri";  // <-- Lowercase ri
import { MdOutlineClose } from 'react-icons/md'; // <-- Lowercase md

    Follow this pattern for the rest of the imports.

    Login or Signup to reply.
  2. 0

    You can’t use strings like that. React won’t know which component you refer to exactly just by a string

    Change strings to the actual components reference and import these components in the same file you are creating this object:

    {
  type: "buttons",
  buttons: [
    {
      type: "camera",
      icon: BsCameraVideo,
    },
    {
      type: "rotateCounterClockwise",
      icon: TbRotate2,
    },
    {
      type: "rotate360",
      icon: TbRotate360,
    },
    {
      type: "rotateClockwise",
      icon: TbRotateClockwise2,
    },
    {
      type: "save",
      icon: RiSave3Fill,
    },
    {
      type: "close",
      icon: MdOutlineClose,
    },
  ],
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search