React Js Tabs Panel Component Example

      const { useState } = React;

​

      function App() {

        const [activeTab, setActiveTab] = useState(0);

​

        const tabs = [

          { title: "Font Awesome 4 version", content: "Font Awesome Icons" },

          { title: "Material Design Icons", content: "Material Design Icons" },

          { title: "Bootstrap Icons", content: "Bootstrap Icons" },

        ];

​

        return (

          <div className="container">

            <h3>React Js Tabs Panel Example</h3>

            <div className="tab-panel">

              <div className="tab-header">

                {tabs.map((tab, index) => (

                  <div

                    key={index}

                    className={`tab-title ${

                      activeTab === index ? "active" : ""

                    }`}

                    onClick={() => setActiveTab(index)}

                  >

                    {tab.title}

                  </div>

                ))}

              </div>

              <div className="tab-content">{tabs[activeTab].content}</div>

            </div>

          </div>

        );

      }

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>