Click here to Skip to main content
15,867,594 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am building a react jsx portfolio website. The site is almost finished and I am trying to include a theme switcher. I have tried everything I can think of and can't get the switcher to function properly. Everything else works fine.

Whenever I use the select button, console log shows updated values for val and also indicates that the switchTheme function has indeed fired but the theme only updates once. I suspect that the setAttribute val is stored as static and not dynamic but I have tried everything I can. Could someone please advise? Please make replies retard friendly as I am new to react.

What I have tried:

import React, { useState } from 'react'<br />
// import useLocalStorage from 'use-local-storage'<br />
import Header from './components/header/Header'<br />
import Nav from './components/nav/Nav'<br />
import About from './components/about/About'<br />
import Experience from './components/experience/Experience'<br />
import Services from './components/services/Services'<br />
import Portfolio from './components/portfolio/Portfolio'<br />
import Testimonials from './components/tesimonials/Testimonials'<br />
import Contact from './components/contact/Contact'<br />
import Footer from './components/footer/Footer'<br />
<br />
const palette = ['tropical', 'alt', 'default']<br />
<br />
const App = () => {<br />
  <br />
  const [val, setVal] = useState(palette[0]) <br />
  console.log('Button =',val)<br />
<br />
  const switchTheme = (e)  => {<br />
<br />
      setVal(e.target.value)<br />
<br />
      document.documentElement.setAttribute('data-theme', val)<br />
      console.log('switchTheme has fired!',val)<br />
        }<br />
<br />
  return (<br />
    <div><br />
      <select id='style' value={val} className='btn btn-primary' onChange={(e) => setVal(e.target.value)} onClick={switchTheme}><br />
        <option>'{palette[0]}'</option><br />
        <option>'{palette[1]}'</option><br />
        <option>'{palette[2]}'</option><br />
      </select><br />
    <br />
      <><br />
      <body><br />
          <Header /><br />
          <Nav /><br />
          <About /><br />
          <Experience /><br />
          <Services /><br />
          <Portfolio /><br />
          <Testimonials /><br />
          <Contact /><br />
          <Footer /><br />
      </body><br />
      </><br />
    </div><br />
    <br />
  )<br />
}<br />
<br />
export default App
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900