title: Switch Button using Hooks in ReactJS to display different content
body: <p>I'm trying to create a switch button that can display 2 different contents depending on which of the 2 buttons I click on using the hooks in react js.</p>
  
  <p>I would like to display for example a sentence "You have clicked on the left button" when I click on the left one and the opposite when I click on the right one.</p>
  
  <p>I would like the content to be displayed just below the switch buttons.</p>
  
  <p>In addition, I would like my button to remain active when I clicked on it. That is to say, it should be of a darker color since it is active.</p>
  
  <p>Do you have an idea?</p>
  
  <p>This is the piece of code :</p>
  
  <pre><code>import React,{useState} from 'react';
  import {Button} from "react-bootstrap";
  import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
  import {faBars, faChartLine} from "@fortawesome/free-solid-svg-icons";
  import CustomerTable from "../CustomerTable/CustomerTable";
  
  export default function HookButtonSwitch(props) {
      const [resultatContenu, setResultatContenu] = useState('Content initial');
      const [state, setState] = useState(false);
  
      const handleEventSwitchButton = event =&gt; {
  
          let resultatContenu;
          switch(event.target.id) {
              case 'stats':
                  console.log("Coucou Stats");
                  resultatContenu = 'Stats';
                  break;
              case 'list':
                  console.log("Coucou List");
                  resultatContenu = 'LIST';
                  break;
          }
          setResultatContenu(resultatContenu);
  
      };
  
     const toggle = () =&gt; setState(!state);
  
      return (
          &lt;div&gt;
  
              &lt;br /&gt;
  
              &lt;Button
                  id="list"
                  variant="light"
                  className="border-radius-left"
                  onClick={handleEventSwitchButton}
              &gt;
                  &lt;FontAwesomeIcon icon={faBars} /&gt;
              &lt;/Button&gt;
  
              &lt;Button
                  id="stats"
                  variant="light"
                  className="border-radius-right"
                  onClick={handleEventSwitchButton}
              &gt;
                  &lt;FontAwesomeIcon icon={faChartLine} /&gt;
              &lt;/Button&gt;
  
              &lt;div&gt; {resultatContenu} &lt;/div&gt;
  
              {/* &lt;p&gt;-------&lt;/p&gt;
  
              &lt;div onClick={toggle}&gt;
                  &lt;div className="toggle"&gt;
                      {state ? &lt;div&gt;Yes!   &lt;/div&gt;   : &lt;div&gt;No! &lt;/div&gt;}
                  &lt;/div&gt;
              &lt;/div&gt;
              */}
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>Thank you in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/QbQEi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QbQEi.png" alt="Switch button"></a></p>