title: Export variable - React
body: <p>I have a component called Component1 in which I have the following code:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import Popover from &quot;material-ui-popup-state/HoverPopover&quot;;
  import Fab from &quot;@material-ui/core/Fab&quot;;
  import {
    usePopupState,
    bindHover,
    bindPopover
  } from &quot;material-ui-popup-state/hooks&quot;;
  import PaletteIcon from &quot;@material-ui/icons/Palette&quot;;
  import Colors from &quot;./Colors&quot;;
  
  const DEFAULT_COLOR = &quot;red&quot;;
  const COLORS = [/*list of colors*/];
  
  const Component1 = ({ classes }) =&gt; {
    const popupState = usePopupState({
      variant: &quot;popover&quot;,
      popupId: &quot;demoPopover&quot;
    });
    const [selectedColor, setSelectedColor] = useState(DEFAULT_COLOR);
  
    return (
      &lt;div className=&quot;box&quot; style={{ backgroundColor: selectedColor }}&gt;
        &lt;Fab variant=&quot;extended&quot; {...bindHover(popupState)}&gt;
          &lt;PaletteIcon /&gt;
        &lt;/Fab&gt;
        &lt;Popover
        &gt;
          &lt;div className=&quot;color-palette&quot;&gt;
            {COLORS.map((color) =&gt; (
              &lt;Colors
                key={color}
                selected={selectedColor === color}
                onClick={setSelectedColor}
                color={color}
              /&gt;
            ))}
          &lt;/div&gt;
        &lt;/Popover&gt;
      &lt;/div&gt;
    );
  };
  
  export default Component1;
  </code></pre>
  <p>This component is imported in Component2 where the code is:</p>
  <pre><code>import React from &quot;react&quot;;
  import Component1 from &quot;./Component1&quot;;
  import Fab from &quot;@material-ui/core/Fab&quot;;
  import DeleteIcon from &quot;@material-ui/icons/Delete&quot;;
  
  function Component2(props) {
    function handleClick() {
      props.onDelete(props.id);
    }
  
    return (
      &lt;div className=&quot;note&quot; style={{ backgroundColor: &quot;selectedColor&quot; }}&gt;
        &lt;h1&gt;{props.title}&lt;/h1&gt;
        &lt;p&gt;{props.content}&lt;/p&gt;
        &lt;Fab onClick={handleClick}&gt;
          &lt;DeleteIcon fontSize=&quot;small&quot; /&gt;
        &lt;/Fab&gt;
        &lt;HoverPopover /&gt;
      &lt;/div&gt;
    );
  }
  
  export default Component2;
  </code></pre>
  <p>In component2 I need to use the <code>const selectedColor</code> for styling purpose for <code>div</code> with <code>class=&quot;note&quot;</code>. However the issue is when I select colors from <code>COLORS</code> list the background-color of <code>div</code> with <code>class=&quot;note&quot;</code> is not changing. I tried many options but I don't understand how to do it correctly. Please tell me how to do it right.</p>