title: React js - Show or hide a div
body: <p>I am trying to show or hide a div in Reactjs using the state value in the CSS style option - display and I am using functions with hooks. I have a button and below the button a div. When i click the button i either want to hide or show the contents in the div based on whether it is currently shown or hidden.</p>
  
  <p>This is the basic test code I have</p>
  
  <pre><code>import React, { useState } from "react";
  
  function hide() {
    return (
      &lt;div&gt;
        &lt;Mycomp /&gt;
      &lt;/div&gt;
    );
  }
  
  function Mycomp() {
    const [dp, setDp] = useState("none");
  
    return (
      &lt;form&gt;
        &lt;button
          onClick={() =&gt; {
            setDp("block");
          }}
        &gt;
          Test
        &lt;/button&gt;
        &lt;div style={{ display: dp }}&gt;Test&lt;/div&gt;
      &lt;/form&gt;
    );
  }
  
  export default hide;
  </code></pre>
  
  <p>I then use this hide component in my <code>App.js</code> file. When I click the button the new state is assigned but then the page re-renders and the initial state is loaded again almost immediately. How can I go by ensuring the new state is kept? Eventually I will create a function where if the div display or not based on the previous state.</p>