solution

README.md

@@ -27,4 +27,4 @@ Follow the next requirements to pass the tests:
 - Install the Prettier Extension and use these [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
 - Implement a solution following the [React task guidelines](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Open one more terminal and run tests with `npm test` to ensure your solution is correct.
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_tabs-js/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://svitlanak31.github.io/react_tabs-js/) and add it to the PR description.

src/App.jsx

@@ -1,20 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
 import { tabs } from './tabsData';
-import { useState } from 'react';
 import { Tabs } from './components/Tabs';
 
 export const App = () => {
   const [activeTabId, setActiveTabId] = useState('tab-1');
 
+  const activeTab = tabs.find(tab => tab.id === activeTabId);
+
   return (
     <div className="section">
       <h1 className="title">
-        Selected tab is {tabs.find(tab => tab.id === activeTabId).title}
+        Selected tab is {activeTab.title}
       </h1>
-      <Tabs tabs={tabs} activeTabId={activeTabId} onTabSelected={setActiveTabId} />
+      <Tabs
+        tabs={tabs}
+        activeTabId={activeTabId}
+        onTabSelected={setActiveTabId}
+      />
     </div>
   );
 };

src/components/Tabs/Tabs.jsx

@@ -1,38 +1,43 @@
-import React from "react";
+import React from 'react';
+import classNames from 'classnames';
 
 export const Tabs = ({ tabs, activeTabId, onTabSelected }) => {
   const validTabIds = tabs.map(tab => tab.id);
-  const currentTabId = validTabIds.includes(activeTabId) ? activeTabId : validTabIds[0];
+  const currentTabId = validTabIds.includes(activeTabId)
+    ? activeTabId
+    : validTabIds[0];
 
-  const handleTabClick = (tabId) => {
+  const handleTabClick = tabId => {
     if (tabId !== currentTabId) {
       onTabSelected(tabId);
     }
   };
 
+  const activeTabContent = tabs.find(tab => tab.id === currentTabId)?.content;
+
   return (
     <div data-cy="TabsComponent">
       <div className="tabs is-boxed">
         <ul>
-          {tabs.map((tab) => (
+          {tabs.map(({ id, title }) => (
             <li
-              key={tab.id}
-              className={tab.id === currentTabId ? 'is-active' : ''}
+              key={id}
+              className={classNames({ 'is-active': id === currentTabId })}
               data-cy="Tab"
             >
               <a
-                href={`#${tab.id}`}
+                href={`#${id}`}
                 data-cy="TabLink"
-                onClick={() => handleTabClick(tab.id)}
+                onClick={() => handleTabClick(id)}
               >
-                {tab.title}
+                {title}
               </a>
             </li>
           ))}
         </ul>
       </div>
       <div className="block" data-cy="TabContent">
-        {tabs.find((tab) => tab.id === currentTabId)?.content}
+        {activeTabContent}
       </div>
     </div>
   );

src/tabsData.js

@@ -1,5 +1,5 @@
-export const tabs = [
-  { id: 'tab-1', title: 'Tab 1', content: 'Some text 1' },
-  { id: 'tab-2', title: 'Tab 2', content: 'Some text 2' },
-  { id: 'tab-3', title: 'Tab 3', content: 'Some text 3' },
-];
+export const tabs = [
+  { id: 'tab-1', title: 'Tab 1', content: 'Some text 1' },
+  { id: 'tab-2', title: 'Tab 2', content: 'Some text 2' },
+  { id: 'tab-3', title: 'Tab 3', content: 'Some text 3' },
+];