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://StanislavKapytsia.github.io/react_tabs-js/) and add it to the PR description.

src/App.jsx

@@ -1,44 +1,49 @@
-import React from 'react';
+// import React from 'react';
+import { useState } from 'react';
+
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
+import { Tabs } from './components/Tabs/Tabs';
 
 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 App = () => (
-  <div className="section">
-    <h1 className="title">Selected tab is Tab 1</h1>
+function getContent(data, title) {
+  const currentTab = data.filter(item => item.title === title);
 
-    <div data-cy="TabsComponent">
-      <div className="tabs is-boxed">
-        <ul>
-          <li className="is-active" data-cy="Tab">
-            <a href="#tab-1" data-cy="TabLink">
-              Tab 1
-            </a>
-          </li>
+  return currentTab[0].content;
+}
 
-          <li data-cy="Tab">
-            <a href="#tab-2" data-cy="TabLink">
-              Tab 2
-            </a>
-          </li>
+export const App = () => {
+  const [selectLink, setSelectLink] = useState('Tab 1');
 
-          <li data-cy="Tab">
-            <a href="#tab-3" data-cy="TabLink">
-              Tab 3
-            </a>
-          </li>
-        </ul>
-      </div>
+  return (
+    <div className="section">
+      <h1 className="title">{`Selected tab is ${selectLink}`}</h1>
 
-      <div className="block" data-cy="TabContent">
-        Some text 1
+      <div data-cy="TabsComponent">
+        <div className="tabs is-boxed">
+          <ul>
+            {tabs.map(tab => (
+              <Tabs
+                tab={tab}
+                key={tab.id}
+                select={selectLink}
+                set={setSelectLink}
+              />
+            ))}
+          </ul>
+        </div>
+        {selectLink && (
+          <div className="block" data-cy="TabContent">
+            {getContent(tabs, selectLink)}
+          </div>
+        )}
       </div>
     </div>
-  </div>
-);
+  );
+};

src/components/Tabs/Tabs.jsx

@@ -1 +1,20 @@
-export const Tabs = () => {};
+export const Tabs = ({ tab, select, set }) => {
+  const check = tab.title === select;
+  let condition = '';
+
+  if (check) {
+    condition = 'go';
+  }
+
+  return (
+    <li data-cy="Tab" className={condition && 'is-active'}>
+      <a
+        href={`#${tab.id}`}
+        data-cy="TabLink"
+        onClick={e => set(e.target.textContent)}
+      >
+        {tab.title}
+      </a>
+    </li>
+  );
+};