fixed code

src/components/Outstaffing/Outstaffing.js

@@ -3,15 +3,13 @@ import { useSelector } from 'react-redux';
 import style from './Outstaffing.module.css';
 import OutstaffingBlock from './OutstaffingBlock';
 import TagSelect from '../Select/TagSelect';
-import { selectTags, selectTab, selectCandidates } from '../../redux/outstaffingSlice';
+import { selectTags } from '../../redux/outstaffingSlice';
 import front from '../../images/front_end.png';
 import back from '../../images/back_end.png';
 import design from '../../images/design.png';
 
 const Outstaffing = () => {
   const tagsArr = useSelector(selectTags);
-  const selected = useSelector(selectTab);
-  const candidatesArr = useSelector(selectCandidates);
 
   return (
     <>
@@ -30,27 +28,21 @@ const Outstaffing = () => {
           <div className="row">
             <div className="col-12 col-xl-4">
               <OutstaffingBlock
-                data={candidatesArr.find((item) => item.skillsName === 'Frontend')}
                 dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_front')}
-                selected={selected === 'Frontend'}
                 img={front}
                 header="Фронтенд"
               />
             </div>
             <div className="col-12 col-xl-4">
               <OutstaffingBlock
-                data={candidatesArr.find((item) => item.skillsName === 'Backend')}
                 dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_back')}
-                selected={selected === 'Backend'}
                 img={back}
                 header="Бэкенд"
               />
             </div>
             <div className="col-12 col-xl-4">
               <OutstaffingBlock
-                data={candidatesArr.find((item) => item.skillsName === 'Marketer')}
                 dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_design')}
-                selected={selected === 'Marketer'}
                 img={design}
                 header="Дизайн"
               />

src/components/Outstaffing/Outstaffing.module.css

@@ -48,7 +48,6 @@
 .outstaffing__box__img {
   min-width: 260px;
   min-height: 120px;
-  cursor: pointer;
   background-color: #f9f9f9;
   border-radius: 20px;
   position: relative;
@@ -68,7 +67,6 @@
 }
 
 .outstaffing__box__img > img {
-  cursor: pointer;
   position: absolute;
 }
 

src/components/Outstaffing/OutstaffingBlock.js

@@ -1,15 +1,13 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { selectedTab, selectItems, selectedItems } from '../../redux/outstaffingSlice';
+import { selectItems, selectedItems } from '../../redux/outstaffingSlice';
 import style from './Outstaffing.module.css';
 
-const OutstaffingBlock = ({ dataTags = [], data = {}, selected, img, header }) => {
+const OutstaffingBlock = ({ dataTags = [], selected, img, header }) => {
   const dispatch = useDispatch();
 
   const itemsArr = useSelector(selectItems);
 
-  const { skillsName } = data;
-
   const handleBlockClick = (item, id) => {
     if (!itemsArr.find((el) => item === el.value)) {
       dispatch(selectedItems([...itemsArr, { id, value: item, label: item }]));
@@ -30,10 +28,7 @@ const OutstaffingBlock = ({ dataTags = [], data = {}, selected, img, header }) =
 
   return (
     <div className={style.outstaffing__box}>
-      <div
-        className={`${style.outstaffing__box__img} ${selected ? style.border : null}`}
-        onClick={() => dispatch(selectedTab(skillsName))}
-      >
+      <div className={`${style.outstaffing__box__img} ${selected ? style.border : null}`}>
         <h3>{header}</h3>
         <img className={classes} src={img} alt="img" />
       </div>