title: Toggle text within a variable type function in React JS
body: <p>Let's say I have a function:</p>
  <pre><code>import React from &quot;react&quot;;
  
  const Test = () =&gt; {
    return (
      &lt;React.Fragment&gt;
        &lt;h1&gt;Hello World&lt;/h1&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  export default Test;
  </code></pre>
  <p>I want to toggle the Hello World text on and off with a button. How would I achieve this? I have looked at:</p>
  <ol>
  <li><p><a href="https://medium.com/path2code/how-react-js-toggle-button-works-99c838ae2fe1" rel="nofollow noreferrer">How React.js Toggle Button Works</a></p>
  </li>
  <li><p><a href="https://stackoverflow.com/questions/42299805/react-js-onclick-toggle-class-in-map-function">React js onclick toggle class in map function</a></p>
  </li>
  </ol>
  <p>And none of them helped really. They used <code>this.state</code>, to which I got a type error, and then I started wondering if I should use a variable type function or not, as all the tutorials I've looked at use <code>class</code> instead. So my question is, how would I achieve toggling text in a variable type function?</p>
  <p>If you need anymore information, or if my question was poorly phrased, please tell me. Any help is very much appreciated. Thank you!</p>