title: React JS // Editing style of one component from another component
body: <p>My goal is to create a basic app that allows me to change the style of one component with an action from another component.</p>
  
  <p>Lets assume I have a <code>&lt;Btn/&gt;</code> component and a <code>&lt;Box/&gt;</code> component and when the button is clicked, I want to change the background color of the box. <code>&lt;Btn/&gt;</code> and <code>&lt;Box/&gt;</code> have the common ancestor of <code>&lt;App/&gt;</code> but are both at different levels in the component tree. </p>
  
  <p><em>Btn.js</em></p>
  
  <pre><code>import React from 'react'
  
  function Btn() {
  
    const handleClick = (e) =&gt; {
      //...
    }
  
    return (
      &lt;button onClick={handleClick}&gt;
        Click me
      &lt;/button&gt;
    );
  }
  
  export default Btn
  </code></pre>
  
  <p><em>Box.js</em></p>
  
  <pre><code>import React from 'react'
  
  function Box() {
    return (
      &lt;h1&gt;
         Hello World!
      &lt;/h1&gt;
    );
  }
  
  export default Box
  </code></pre>
  
  <p>I do not want to use prop drilling (with style setting/getting functionality in the <code>&lt;App/&gt;</code> component) to achieve this. I have also deliberately left out component styling as I am open to whichever styling option is best to solve this problem.</p>
  
  <p>What would be the best way to go about this? (I'm open to using Context, Redux or another library if it is appropriate.)</p>