useState() for conditional styles

Question

I am new to react and working on a project and was wondering how to change the theme of a single Footer component conditionally. Attached are the two themes I am trying to render. Here is the code I currently have: (https://i.sstatic.net/Jhe8O.png)(https://i.sstatic.net/ioHli.png) `

function Footer({ themeSecondary }) {
  return (
    <React.Fragment>
      <footer
        className="footer"
        style={
          themeSecondary
            ? { backgroundColor: '#D5966C' }
            : { backgroundColor: '#151515' }
        }
      >
        <img
          src={
            themeSecondary ? 'assets/logo-dark.svg' : 'assets/logo-light.svg'
          }
          alt="Modern Art Gallery"
          className="footer__logo"
        />
        <p
          className="footer__desc"
          style={themeSecondary ? { color: '#151515' } : { color: '#FFF' }}
        >
          The Modern Art Gallery is free to all visitors and open seven days a
          week from 8am to 9pm. Find us at 99 King Street, Newport, USA.
        </p>
        <ul
          className="footer__media-container"
          style={themeSecondary ? { filter: 'invert(1)' } : {}}
        >
          <li className="footer__media-icon">
            <a href="https://www.facebook.com" target="_blank" rel="noreferrer">
              <img src="/assets/icon-facebook.svg" alt="facebook" />
            </a>
          </li>
          <li className="footer__media-icon">
            <a
              href="https://www.instagram.com"
              target="_blank"
              rel="noreferrer"
            >
              <img src="/assets/icon-instagram.svg" alt="instagram" />
            </a>
          </li>
          <li className="footer__media-icon">
            <a href="https://www.twitter.com" target="_blank" rel="noreferrer">
              <img src="/assets/icon-twitter.svg" alt="twitter" />
            </a>
          </li>
        </ul>
      </footer>
    </React.Fragment>
  )
}

`

`

function Home() {
  const [themeSecondary, setThemeSecondary] = useState(null)

  useEffect(() => {
    setThemeSecondary(false)
    console.log(themeSecondary)
  }, [themeSecondary])

  return (
    <div>
      <header className="hero">
        <div className="hero__img"></div>
        <h1 className="hero__title">
          Modern <br /> Art Gallery
        </h1>
        <p className="hero__desc">
          The arts in the collection of the Modern Art Gallery all started from
          a spark of inspiration. Will these pieces inspire you? Visit us and
          find out.
        </p>
        <button className="hero__cta">Our Location</button>
      </header>
      <main className="main">
        <article className="main__container-grid1">
          <img
            src="/assets/mobile/image-grid-1.jpg"
            alt="art-gallery"
            className="main__img-grid1 img"
          />
          <h2 className="main__title-grid1">Your day at the Gallery</h2>
          <p className="main__desc-grid1">
            Wander through our distinct collections and find new insights about
            our artists. Dive into the details of their creative process.
          </p>
        </article>
        <section className="main__container-grid2">
          <img
            src="/assets/mobile/image-grid-2.jpg"
            alt="art gallery with bench for viewing"
            className="main__img-grid2 img"
          />
          <img
            src="/assets/mobile/image-grid-3.jpg"
            alt="vistors browsing art collections"
            className="main__img-grid3 img"
          />
          <article className="main__content-wrapper">
            <h2 className="main__title-grid2">Come & be inspired</h2>
            <p className="main__desc-grid2">
              We’re excited to welcome you to our gallery and see how our
              collections influence you.
            </p>
          </article>
        </section>
      </main>
      <Footer theme={themeSecondary} />
    </div>
  )
}

`

`

function Location() {

  const [themeSecondary, setThemeSecondary] = useState(true)

  useEffect(() => {
    setThemeSecondary(true)
    console.log(themeSecondary)
  }, [themeSecondary])

  return (
    <div className="location">
     <Footer theme={themeSecondary} />
    </div>
  )
}

export default Location

`

Like I said, I am very new to react, and I am having issues updating the styles inline. I think it has something to do with the callstack, and the order everything happens, but I am not sure. Thanks :)

Answer 1

I think I know what you are doing wrong. When passing themeSecondary as props to the Footer component you are giving it the name theme not themeSecondary. Look below:

function Home() {
...
<Footer theme={themeSecondary} />
}

Then in the Footer component you are destructuring the props as themeSecondary. So you could fix your error by doing this:

function Footer({ theme }) {
...
}

After doing that, you will need to change themeSecondary everywhere in the Footer component to theme.