更改 svg 颜色：React.createElement：类型无效 — 应为字符串

Question

I have a section I would like on click to change the color of SVG color,

Here is my solution so far

    import { ReactComponent as DownloadSVG } from 'assets/images/share_download.svg';
        .......
    
    const Demo = () => {
    
        return (
         <div className={`download-options ${tab ==='downloadoptions' && 'active-tab'}`}>
           <span style={{ backgroundColor: isBlack ? '#262626' : '#F3F3F3'}} className="download_icon" onClick={handleDownloadTabClick}>
                        <DownloadSVG style={{ fill: isBlack ? '#fff' : '#262626'}} />
            </span>
          <span className="download_title media-text">DOWNLOAD</span>
         </div>
    )
 }
export default Demo;

Unfortunatelly iam getting the following error

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

What is wrong here?

Answer 1

I believe it's the tab variable declaration.

Try:

import { ReactComponent as DownloadSVG } from "assets/images/share_download.svg";

const Demo = () => {
  return (
    <div
      className={`download-options ${
        tab && tab === "downloadoptions" ? "active-tab" : ""
      }`}
    >
      <span
        style={{ backgroundColor: isBlack ? "#262626" : "#F3F3F3" }}
        className="download_icon"
        onClick={handleDownloadTabClick}
      >
        <DownloadSVG style={{ fill: isBlack ? "#fff" : "#262626" }} />
      </span>
      <span className="download_title media-text">DOWNLOAD</span>
    </div>
  );
};

export default Demo;

---

Why this works

It's very difficult to really know because I can only see part of the source code – so, my best guess is that on initial render, the tab variable is not defined (yet), and therefore is undefined .

When you use short-hand logic like this: tab === "downloadoptions" && 'active-tab' , JavaScript returns the value false when the part before the && is falsey. This is a Boolean value, where React is expecting a String .

You can see it when you paste this into your browser console:

let tab; // this sets the variable, but it is still "undefined"
console.info(tab === "downloadoptions" && 'active-tab'); // returns: false

It is therefore better to use a Ternary operator that will always return a string.

Like so:

let tab; // this sets the variable, but it is still "undefined"
console.info(tab && tab === "downloadoptions" ? 'active-tab' : 'nothing'); // returns: "nothing"

Hope this clears things up.