How to use const of one component in another component

Question

I'm new to reactjs. I'm trying to implement a toggleTheme action in every page of my project.

So, Instead of declaring it in every component, I thought of creating a toggle theme component itself and import it in all other components.

I don't know why but for some reason it is not working properly.

Here is my code... toggletheme.js

import Brightness4Icon from '@material-ui/icons/Brightness4';
import Brightness7Icon from '@material-ui/icons/Brightness7';
import React, { useState } from 'react';
import './BasePage.css';

const ToggleTheme = (isLight, setLight) => {
  [isLight, setLight] = useState("true");
  const toggleTheme = () => {
    setLight(!isLight);
  }
  console.log(isLight)
  return (
    <div className="themebtn" onClick={toggleTheme}>
      {isLight ? <Brightness7Icon /> : <Brightness4Icon />}
    </div>
  )
}

export default ToggleTheme

Another component in which I want to import toggletheme component basepage.js

import ToggleTheme from './ToggleTheme'
import React, { useState } from 'react';

const Basepage = () => {
  return (
   <div className={isLight ? "light" : "dark"}>
    <div>
      <ToggleTheme />
    </div>
   </div>
  )
}

export default Basepage

basepage.css

.light {
  --background: #ffffff;
  --background-color: #f1f1f1;
  --blue: #1b98f5;
  --foreground: #323234;
  --shadow: 4px 4px 4px #aaa;
}

.dark {
  --background: #323234;
  --background-color: #202124;
  --blue: #1b98f5;
  --foreground: #f1f1f1;
  --shadow: 4px 4px 4px #222;
}

I'm getting at isLight in my basepage.js

I would appreciate some help in rectifying it. Thank you.

Answer 1

It is very simple, because you are using a string "true" to set the initial state of the variable in your file toggletheme.js and remember that a string with characters is always true , that is why in the ternary operator you asked if the variable was true or not, and it returns always true .

Just change this useState("true") to useState(true) .

import Brightness4Icon from '@material-ui/icons/Brightness4';
import Brightness7Icon from '@material-ui/icons/Brightness7';
import React, { useState } from 'react';
import './BasePage.css';

const ToggleTheme = (isLight, setLight) => {
  [isLight, setLight] = useState(true);
  const toggleTheme = () => {
    setLight(!isLight);
  }
  console.log(isLight)
  return (
    <div className="themebtn" onClick={toggleTheme}>
      {isLight ? <Brightness7Icon /> : <Brightness4Icon />}
    </div>
  )
}

export default ToggleTheme

Answer 2

const ToggleTheme = ({isLight, setLight}) => {
  const toggleTheme = () => {
    setLight(!isLight);
  }
  console.log(isLight)
  return (
    <div className="themebtn" onClick={toggleTheme}>
      {isLight ? <Brightness7Icon /> : <Brightness4Icon />}
    </div>
  )
}

const Basepage = () => {
  const [isLight, setLight] = React.useState(true);
  return (
   <div className={isLight ? "light" : "dark"}>
    <div>
      <ToggleTheme isLight={isLight} setLight={setLight} />
    </div>
   </div>
  )
}

Answer 3

I have majorly used chakra-ui and I have hated the fact that you can use true and false to set the theme, what if you choose to have a different theme down the road?

import Brightness4Icon from '@material-ui/icons/Brightness4';
import Brightness7Icon from '@material-ui/icons/Brightness7';
import { useEffect, useState } from 'react';
const useTheme = () => {
  let themes=['light','dark'];
  let icons =[ <Brightness7Icon /> , <Brightness4Icon />]
  const [icon,setIcon]=useState(<Brightness7Icon />);
  let [theme, setTheme] = useState("light");
  let changeTheme=()=>{
    let index =themes.indexOf(theme)
    if(index==themes.length-1)
    {
      setTheme(themes[0]);
      setIcon(icons[0]);
    }
    else{
      setTheme(themes[index+1]);
      setIcon(icons[index+1]);
    }
  }
  useEffect(()=>{

  },[theme])
  return ([theme,changeTheme,<div onClick={changeTheme}>{icon}</div>])
}

export default useTheme

import useTheme from './toggle'
import React from 'react';

const Basepage = () => {
  let [theme,changeTheme,icon] = useTheme();
  return (
   <div className={theme}>
    <div>
    {icon}
    </div>
   </div>
  )
}
export default Basepage