title: Need loop to simplify a component
body: <p>I am building a Tabs component in React JS. I want to create a loop for my code, instead of hardcoding every tab(title, content). The code is working I need to simplify the code with a loop.</p>
  <p>Tabs Component</p>
  <pre><code>import { useState } from &quot;react&quot;
  import &quot;./TabsStyles.css&quot;
  
  const Tabs = () =&gt; {
  
      const [toggleTabsNumber, setToggleTabsNumber] = useState(null)
  
      const togglerFunction = (index) =&gt; {
          setToggleTabsNumber(index)
      }
  
    return (
      &lt;div&gt;
          &lt;div className=&quot;c-tabs-main-container&quot;&gt;
              &lt;div className=&quot;c-tabs-title-container&quot;&gt;
                  &lt;h3 onClick={() =&gt; togglerFunction(1)}&gt;Tab 01&lt;/h3&gt;
                  &lt;h3 onClick={() =&gt; togglerFunction(2)}&gt;Tab 02&lt;/h3&gt;
                  &lt;h3 onClick={() =&gt; togglerFunction(3)}&gt;Tab 03&lt;/h3&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;c-tabs-content-container&quot;&gt;
                  &lt;p className={toggleTabsNumber === 1 ? &quot;c-active&quot;  : &quot;&quot;}&gt;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut similique asperiores nihil ullam non ad, dolorem quam eligendi rem praesentium nemo sed error pariatur voluptates hic voluptatem aliquam sapiente unde?&lt;/p&gt;
                  &lt;p className={toggleTabsNumber === 2 ? &quot;c-active&quot;  : &quot;&quot;}&gt;Qquam eligendi rem praesentium nemo sed error pariatur voluptates hic voluptatem aliquam sapiente unde?&lt;/p&gt;
                  &lt;p className={toggleTabsNumber === 3 ? &quot;c-active&quot;  : &quot;&quot;}&gt;PPhic voluptatem aliquam sapiente unde?&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;        
      &lt;/div&gt;
    )
  }
  
  export default Tabs
  </code></pre>