fixed js code

src/components/Outstaffing/Outstaffing.js

@@ -1,29 +1,14 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import style from './Outstaffing.module.css';
 import OutstaffingBlock from './OutstaffingBlock';
 import TagSelect from '../Select/TagSelect';
-import { selectTags } from '../../redux/outstaffingSlice';
-
-const Outstaffing = ({ selected, candidatesArray }) => {
-  const [selectedItems, setSelectedItems] = useState([]);
+import { selectTags, selectTab, selectCandidates } from '../../redux/outstaffingSlice';
 
+const Outstaffing = () => {
   const tagsArr = useSelector(selectTags);
-
-  const handleBlockClick = (item) => {
-    console.log('item ', item);
-    if (!selectedItems.find((el) => item === el.value)) {
-      setSelectedItems([...selectedItems, { value: item, label: item }]);
-    }
-  };
-
-  const handleSubmit = () => {
-    const filterItems = JSON.stringify(selectedItems.map((item) => item.value));
-
-    alert(`Back-end: ${filterItems}`);
-
-    setSelectedItems([]);
-  };
+  const selected = useSelector(selectTab);
+  const candidatesArr = useSelector(selectCandidates);
 
   return (
     <>
@@ -42,37 +27,29 @@ const Outstaffing = ({ selected, candidatesArray }) => {
           <div className="row">
             <div className="col-12 col-xl-4">
               <OutstaffingBlock
-                data={candidatesArray.find((item) => item.skillsName === 'Frontend')}
+                data={candidatesArr.find((item) => item.skillsName === 'Frontend')}
                 dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_front')}
-                onClick={(item) => handleBlockClick(item)}
                 selected={selected === 'Frontend'}
               />
             </div>
             <div className="col-12 col-xl-4">
               <OutstaffingBlock
-                data={candidatesArray.find((item) => item.skillsName === 'Backend')}
+                data={candidatesArr.find((item) => item.skillsName === 'Backend')}
                 dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_back')}
-                onClick={(item) => handleBlockClick(item)}
                 selected={selected === 'Backend'}
               />
             </div>
             <div className="col-12 col-xl-4">
               <OutstaffingBlock
-                data={candidatesArray.find((item) => item.skillsName === 'Marketer')}
+                data={candidatesArr.find((item) => item.skillsName === 'Marketer')}
                 dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_design')}
-                onClick={(item) => handleBlockClick(item)}
-                selected={selected === 'Design'}
+                selected={selected === 'Marketer'}
               />
             </div>
           </div>
         </div>
       </section>
-      <TagSelect
-        options={tagsArr}
-        selectedItems={selectedItems}
-        tagSubmit={handleSubmit}
-        setSelectedItems={setSelectedItems}
-      />
+      <TagSelect />
     </>
   );
 };

src/components/Outstaffing/OutstaffingBlock.js

@@ -1,13 +1,21 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
-import { selectedTab } from '../../redux/outstaffingSlice';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectedTab, selectItems, selectedItems } from '../../redux/outstaffingSlice';
 import style from './Outstaffing.module.css';
 
-const OutstaffingBlock = ({ dataTags = [], data = {}, onClick, selected }) => {
+const OutstaffingBlock = ({ dataTags = [], data = {}, selected }) => {
   const dispatch = useDispatch();
 
+  const itemsArr = useSelector(selectItems);
+
   const { header, img, skillsName } = data;
 
+  const handleBlockClick = (item) => {
+    if (!itemsArr.find((el) => item === el.value)) {
+      dispatch(selectedItems([...itemsArr, { value: item, label: item }]));
+    }
+  };
+
   let classes;
 
   dataTags.forEach((el) => {
@@ -34,7 +42,7 @@ const OutstaffingBlock = ({ dataTags = [], data = {}, onClick, selected }) => {
         {dataTags && (
           <ul className={style.items}>
             {dataTags.map((item) => (
-              <li key={item.id} onClick={() => onClick(item.value)}>
+              <li key={item.id} onClick={() => handleBlockClick(item.value)}>
                 {item.value}
               </li>
             ))}