Next.js Discord

Discord Forum

Question on const usage in a component (pretty basic React question)

Unanswered
Forest bachac posted this in #help-forum
Open in Discord
Forest bachacOP
Hi everyone, I have tailwind UI and I'm trying to implement a theming system similar to : https://www.skies.dev/tailwind-themes
- I'm sure something I'm missing is basic react functionality but I've not been able to find the right answer and I'm sorry to just brain dump here but I've kind of reached an impasse (and don't have a lot of friends familiar enough with React to help...)
- His basic tutorial works great, however I'm trying to expand on that.

- The Basics, I'm using React, Next.JS (App Directory), Tailwind UI

- - I've defined my theme colors in global.css and their associated variables
- - In layout.tsx I declare the themes (as colors) and define color as setColor
export default function RootLayout({
  
  children,
}: {
  children: React.ReactNode
}) {
  const colors = ['light', 'dark', 'blue', 'highcontrast'];
  const [color, setColor] = useState<string>(colors[1])
  return (

        <html className="h-full bg-white">
          <body className="h-full">
          <div className={[
            
            color && `theme-${color}`,
            ]
            .filter(Boolean)
            .join(' ')}>
              {children}
          </div> 
          </body>
       </html>
  )
}


- - page.tsx calls the component <Sidebar /> which is not really just a sidebar but also a navbar (from TailwindUI)
- - Inside Sidebar I have the following menu drop down to select the themes

<RadioGroup value={color} onChange={setColor}>
                        <RadioGroup.Label className="mt-5 block">
                          Select a color:
                        </RadioGroup.Label>
                        <div className="">
                          {colors.map((c) => {
                            return (
                              <div>
                              <RadioGroup.Option
                                className=""
                                value={c}
                                key={c}
                              >
                                {c}
                              </RadioGroup.Option>
                              </div>
                            );
                          })}
                        </div>
                      </RadioGroup>

- - I tried this with both a links and the RadioGroup (since it was what skies used in his demo) but part of the problem is that color and setColor are not defined, I can redeclare them but I feel like that doesn't work since it's not mutating the original property

- - My GOAL here isn't JUST to get this working but to also understand why it's either NOT working or what I'm overlooking, I've been googling this for about a week and been given a couple of suggestions of entirely different ways to handle this but I feel like I'm missing a basic thing here... maybe not... and though I want to get this done, it's not an urgent item but I also want to learn

0 Replies