title: React - Changing CSS property on click (arrow function)
body: <p>I have the following in one of my React / Gatsby files:</p>
  
  <pre><code>import React from "react"
  
  const click = () =&gt; {
    console.log("J");
  }
  
  const NavButton = () =&gt; 
    &lt;button className="navbar-toggler navbar-toggler-right" style={{backgroundColor: 'blue', position: "absolute", margin: "30px"}}type="button" data-toggle="collapse" data-target="#collapsingNavbar" onClick={click}&gt;
      &lt;div id="nav-icon1"&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/button&gt;
  
  const Dropdown = () =&gt; 
  &lt;div style={{visibility: "hidden", backgroundColor: "blue", position: "absolute", height: "100%", width: "100%"}}&gt;
  &lt;/div&gt;
  
  export default (props) =&gt;
    &lt;div className="left col-xs-12 col-md-6"&gt;
      &lt;Dropdown /&gt;
      &lt;NavButton /&gt;
      {props.children}
    &lt;/div&gt;
  </code></pre>
  
  <p>Now I would like to fire <code>click()</code> whenever somebody presses the <code>NavButton</code>, and then I would like to make <code>Dropdown</code> visible. How would I do this? Right now I have it hardcoded that <code>Dropdown</code> has <code>style={{visibility: "hidden", ...</code>.</p>
  
  <p>I'm also wondering whether I am doing this correctly, having everything loosely in these different functions, if somebody could tell me that would be great!</p>