[SOLVED] What am I doing wrong when I try to return a Component directly and it doesn't work, but using React.CloneElement solves the issue?

What am I doing wrong when I try to return a Component directly and it doesn't work, but using React.CloneElement solves the issue?

What am I doing wrong when I am returning an React Component Icon from the FileMappers.jsx file.

Reproduction of the issue: https://codesandbox.io/s/create-react-app-forked-gb03o3?file=/src/fileIconMapper.jsx

Error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `FileIconMapper`.

// working
...
return React.cloneElement(Icon);
...

// not working
...
return <Icon size="40px" color="red" />;
...

Project config:

{
...
  "dependencies": {
    "next": "^13.2.3",
    "react": "18.2.0",
    "react-bootstrap": "^2.7.2",
    "react-bootstrap-icons": "^1.10.2",
    "react-datepicker": "^4.10.0",
    "react-dom": "18.2.0",
    "react-select": "^5.7.0",
  },
...
}

I am wanting to build a dictionary of icons that I can conditionally render as you can see according to the returned file type from my API. It seems I cannot do it without React.CloneElement. But all my other react elements render just fine without "cloning".

Is it something different with this library? I have tried rendering it in curly braces as {} but that ofcourse didn't work too.

Solution

For every fileType, try to replace this:

"application/pdf": <FiletypePdf />

By this

"application/pdf": FiletypePdf