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

MyIcons.tsx

export const ICONCAR = () => (
<span className="svg-icon svg-icon-primary svg-icon-2x"><svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect x="0" y="0" width="24" height="24"/>
        <path d="M4.88230018,17.2353996 L13.2844582,0.431083506 C13.4820496,0.0359007077 13.9625881,-0.12427877 14.3577709,0.0733126292 C14.5125928,0.15072359 14.6381308,0.276261584 14.7155418,0.431083506 L23.1176998,17.2353996 C23.3152912,17.6305824 23.1551117,18.1111209 22.7599289,18.3087123 C22.5664522,18.4054506 22.3420471,18.4197165 22.1378777,18.3482572 L14,15.5 L5.86212227,18.3482572 C5.44509941,18.4942152 4.98871325,18.2744737 4.84275525,17.8574509 C4.77129597,17.6532815 4.78556182,17.4288764 4.88230018,17.2353996 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.000087, 9.191034) rotate(-315.000000) translate(-14.000087, -9.191034) "/>
    </g>
</svg></span>
);

export const ICONHOME = () => (
<span className="svg-icon svg-icon-primary svg-icon-2x"><svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect x="0" y="0" width="24" height="24"/>
        <path d="M15,3 L15.4502481,7.5024814 C15.4784917,7.78491722 15.7161555,8 16,8 C16.2838445,8 16.5215083,7.78491722 16.5497519,7.5024814 L17,3 L18,3 L18.4502481,7.5024814 C18.4784917,7.78491722 18.7161555,8 19,8 C19.2838445,8 19.5215083,7.78491722 19.5497519,7.5024814 L20,3 L21,3 L21,7.5 C21,9.43299662 19.4329966,11 17.5,11 C15.5670034,11 14,9.43299662 14,7.5 L14,3 L15,3 Z" fill="#000000"/>
        <path d="M17.5,13 L17.5,13 C18.0610373,13 18.5243493,13.4382868 18.55547,13.9984604 L18.916795,20.5023095 C18.9602658,21.2847837 18.3611851,21.9543445 17.5787108,21.9978153 C17.5524991,21.9992715 17.5262521,22 17.5,22 L17.5,22 C16.7163192,22 16.0810203,21.3647011 16.0810203,20.5810203 C16.0810203,20.5547682 16.0817488,20.5285212 16.083205,20.5023095 L16.44453,13.9984604 C16.4756507,13.4382868 16.9389627,13 17.5,13 Z" fill="#000000" opacity="0.3"/>
        <path d="M7.5,14 L7.5,14 C8.06209761,14 8.5273156,14.4370496 8.56237829,14.9980526 L8.90643257,20.5029211 C8.95497952,21.2796724 8.3646533,21.9487088 7.58790204,21.9972557 C7.55863704,21.9990848 7.52932209,22 7.5,22 L7.5,22 C6.72173313,22 6.09082317,21.36909 6.09082317,20.5908232 C6.09082317,20.5615011 6.09173837,20.5321861 6.09356743,20.5029211 L6.43762171,14.9980526 C6.4726844,14.4370496 6.93790239,14 7.5,14 Z" fill="#000000" opacity="0.3"/>
        <path d="M7.5,12 C5.56700338,12 4,9.43299662 4,7.5 C4,5.56700338 5.56700338,3 7.5,3 C9.43299662,3 11,5.56700338 11,7.5 C11,9.43299662 9.43299662,12 7.5,12 Z M7.5095372,4.60103244 L7.56069005,9.94758244 C8.61891495,9.8578583 9.45855912,8.97981222 9.47749614,7.8949109 C9.49728809,6.76103086 8.63275447,4.70470991 7.5095372,4.60103244 Z" fill="#000000"/>
    </g>
</svg></span>
);

MyFile.tsx

import { ICONCAR, ICONHOME }  from "/icons/MyIcons";

export const TestScreen() => {
     useEffect(() => {
        
    }, []);

    return 
    ( 
    <>
    <div>Title</div>
      {response.data.map((x, index) => {
        const IconComponent = x.iconName;
          return (
            <div>
            <p>Test</p>
            <IconComponent ></IconComponent>
            </div>
            );
       })} 
    </>
    )

}

Errors:

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

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

i am getting the above error

if <ICONHOME></ICONHOME> or <ICONCAR></ICONCAR> works instead of <IconComponent ></IconComponent>

Answer

You need to do a mapping between sring and react component. Even tough the names may be equals it has to be done.

Here is an example:

import { ICONCAR, ICONHOME }  from "/icons/MyIcons";

const iconMapping: Record<string, () => JSX.Element> = {
  "ICONCAR": ICONCAR,
  "ICONHOME": ICONHOME
};

export const TestScreen() => {
     useEffect(() => {
        
    }, []);

    return 
    ( 
    <>
    <div>Title</div>
      {response.data.map((x, index) => {
        const IconComponent = iconMapping[x.iconName];
        if (IconComponent === undefined) {
          //handle it by assigning it to an icon
        }
          return (
            <div>
            <p>Test</p>
            <IconComponent ></IconComponent>
            </div>
            );
       })} 
    </>
    )

}

Advertisement

Answer