title: How to send a usestate through props with interface in TypeScrips and react?
body: <p>I'm trying to make a light / dark theme . And I have 2 components.
  The first component is the one below. I succeeded to make a boolean to change my style in my component. It was good so far :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export interface  Props{
  
    theme:boolean;
  
  }
  
  const Theme: FC&lt;Props&gt; = ({theme}) =&gt; {
    const [light,setLightMode]=useState(false);
    return (
      &lt;div&gt;
        &lt;div className="card__theme"&gt;
          &lt;div className={light ? "card__light" : "card__light--active"}&gt;Light&lt;/div&gt;
          &lt;Switch inputProps={{ "aria-label": "controlled" }} onChange={()=&gt;setLightMode(!light)}/&gt;
          &lt;div className={ light ? "card__Dark" : "card__Dark--active"}&gt;Dark&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };</code></pre>
  </div>
  </div>
  </p>
  <p>What I do right now is to use this component in my Home page where I want to do the same thing.
  I want to change the style of my components , making 2 className like the code above with a boolean state.
  The problem that I'm facing is that I can't make another function onChange={} in my home component. First I don't send in interface a function . I want my  const [light,setLightMode]=useState(false); and my function  onChange={()=&gt;setLightMode(!light)} when I switch the button to work in my Home component from below</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const Home: FC = () =&gt; {
    const percentage = 91;
    const [dark,setDark] = useState(false);
  
    return (
      &lt;div&gt;2
        &lt;div className="Container-body"&gt;
          &lt;div className="card"&gt;
            &lt;div className={dark ? "card__theme" : "card__theme--active"}&gt;
              &lt;Theme theme={dark} onChange={()=&gt;{setDark(!dark)}}/&gt;
            &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So to make it sort. I want to use just the light, setlightTheme boolean state from my Theme component in my Home component . I don't know how I can send this with props in TypeScript...</p>
  <p>Here is a print with my code : <a href="https://prnt.sc/1u43k5o" rel="nofollow noreferrer">enter link description here</a></p>