Search code examples
reactjssvgcreateelement

Only first element in a react.createElement is rendered

I need to render dynamicaly an img. Here is my function that translate my logos to components :

import {ReactComponent as MyLogo1} from '../assets/img/logo1.svg'
import {ReactComponent as MyLogo2} from '../assets/img/logo2.svg'
import {ReactComponent as MyLogo3} from '../assets/img/logo3.svg'

export const logoToComponent: any = {
    logo_1: MyLogo1,
    logo_2: MyLogo2,
    logo_3: MyLogo3
};

and then I render it like this :

[...]

const logo: any = (key: string, props: any) => {
        return logoToComponent[key] ? React.createElement(logoToComponent[key], props) : null;
    };

return (
[...]
{logo(`logo_${category.code}`, { className: "mx-auto mb-3 w-6 h-6" })}
[...]
)

The problem is, only the first logo is rendered. In my DOM, when I inspect, every logos are there but only the first one is visible. And in my SVGs, the fill is set for each logos.

Any idea why React only render the first element ?

PS: If I delete the first line in my logoToComponent function, the second is visible and not the following ones.

Solution

  • I post the answer in case it can help.

    Every SVG had the same id "clip-path". I just set a unique id in each SVG, and it works fine.