The tag <> is unrecognized in this browser. If you meant to render a React component, start it-CodePudding

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>

CodePudding user response：

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>
            );
       })} 
    </>
    )

}

CodePudding user response：

It looks like you're trying to tell react to dynamically render your ICONHOME and ICONCAR components. JSX expects to see a variable referring to a component within the tag, but your map call is providing a string containing the component name; that won't work. Assuming response.data is an array of your components, you can solve this by using react.createElement directly, which is what JSX does under the hood. That would look like this;

response.data.map((x, index) => (
  <div>
    <p>Test</p>
    {react.createElement(x, {})} 
  </div>
)

The empty object there is the props that will be provided to the component x. There is also an optional third argument that would be the children.