title: Toggle between two divs or text using React hooks
body: <p>First of all, I am new to React and Hooks.</p>
  <p>What I would like to do is that when a state changes, so does a div or some text.</p>
  <p>So for example:</p>
  <pre><code>const App = ( ) =&gt; {
  
      const [textToggle, textToggleState] = useState(true)
  
      return (
  
          &lt;div&gt;This is come text&lt;/div&gt;
          &lt;div&gt;This is come extra text&lt;/div&gt;
          &lt;div onClick={ () =&gt; textToggleState(!textToggle) }&gt;Click me&lt;/div&gt;
      );
  };
  
  export default memo(App);
  </code></pre>
  <p>So in this case I have my toggle button, which will toggle between a true or false state. This I usually use do add/remove a class from a div, so for example:</p>
  <pre><code>&lt;div className={textToggle ? &quot;normal-class&quot; : &quot;super-class&quot;}&gt;&lt;/div&gt;
  </code></pre>
  <p>Or something similar to that. However, what I would like to achieve is to change between showing the two first divs in the above code, or just add the word <code>extra</code> in the first when ever the toggle is initiated.</p>
  <p>I am not quite sure how to achieve this, and if it even should be made with the <code>useState</code> function.</p>