CODEWITHSUNDEEP
reactjstailwind-csstailwind-ui
Sermad NaJar
Sermad NaJar

Reputation: 165

Invalid value for prop `logo` on <img> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM

In my application, I have light and dark modes. To swap between two logo colors, since the text at some point has to be white and in another dark, I made this:

    import React from "react";
    import { ThemeContext } from "./themeContext";
    
    const LogoToggle = () => {
      const { theme, setTheme } = React.useContext(ThemeContext);
    
      return (
        <div>
          {theme === "dark" ? (
            <a href="./">
              <img
                logo={() => setTheme(theme === "dark" ? "light" : "dark")}
                className="block h-8 w-auto"
                src="Assets/img/logo-dark.svg"
                alt="Tribeto logo"
              />
            </a>
          ) : (
            <a href="./">
              <img
                logo={() => setTheme(theme === "dark" ? "light" : "dark")}
                className="block h-8 w-auto"
                src="Assets/img/logo-light.svg"
                alt="Tribeto logo"
              />
            </a>
          )}
        </div>
      );
    };
    
    export default LogoToggle;

But for some reason I keep getting an error in the console, I have tried a couple of different things, but everything I do breaks the functionality.

The exact error looks like this:

Warning: Invalid value for prop logo on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior img a div LogoToggle@http://localhost:3000/static/js/bundle.js:7472:42 div div div div div Dashboard@http://localhost:3000/static/js/bundle.js:420:88 Dashboard Routes@http://localhost:3000/static/js/bundle.js:116348:7 Router@http://localhost:3000/static/js/bundle.js:116285:7 BrowserRouter@http://localhost:3000/static/js/bundle.js:115758:7 App Suspense body ThemeProvider@http://localhost:3000/static/js/bundle.js:7232:7

Upvotes: 0

Views: 6093

Answers (2)

Ilian Futekov
Ilian Futekov

Reputation: 174

U need to import the 2 svg-s and it should not throw the error. U should do this for every image path u are using in an image tag

import logoDark from "Assets/img/logo-dark.svg"
import logoLight from "Assets/img/logo-light.svg"

  <img
    className="block h-8 w-auto"
    src={theme === 'dark' ? logoDark  : logoLight }
    alt="Tribeto logo"
  />

Upvotes: 0

Ed Lucas
Ed Lucas

Reputation: 7335

There's no logo attribute on the img HTML element and if there were, you are trying to assign a function to it, not a string.

If you want to toggle the light/dark state, you could instead add an onClick attribute to the logo wrapper. I've also simplified the image swap, since both images share the same markup.

const LogoToggle = () => {
  const { theme, setTheme } = React.useContext(ThemeContext);

  return (
    <div onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      <img
        className="block h-8 w-auto"
        src={theme === 'dark' ? "Assets/img/logo-dark.svg" : "Assets/img/logo-light.svg"}
        alt="Tribeto logo"
      />
    </div>
  )
}

Edit: If you're just trying to use the correct dark/light logo and not use the image to switch modes, you can just wrap the logo in a link:

const LogoToggle = () => {
  const { theme, setTheme } = React.useContext(ThemeContext);

  return (
    <a href="\">
      <img
        className="block h-8 w-auto"
        src={theme === 'dark' ? "Assets/img/logo-dark.svg" : "Assets/img/logo-light.svg"}
        alt="Tribeto logo"
      />
    </a>
  )
}

Upvotes: 0

Related Questions