fixed code

src/components/Outstaffing/Outstaffing.js

@@ -11,17 +11,34 @@ const Outstaffing = () => {
   const [selectedItems, setSelectedItems] = useState([]);
 
   useEffect(() => {
-    const tempData = ['Ruby on Rails', 'Nginx', 'Docker', 'PostgreSQL', 'Vue.js', 'Typescript', 'ReactJS'];
+    const tags = [
-    setData(tempData);
+      {
+        name: 'front',
+        img: '../../images/front_end.png',
+        tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css'],
+      },
+      {
+        name: 'back',
+        img: '../../images/back_end.png',
+        tags: ['Ruby on Rails', 'Node.js', 'Express', 'Php', 'Python', 'Wordpress'],
+      },
+      {
+        name: 'design',
+        img: '../../images/design.png',
+        tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw'],
+      },
+    ];
+
+    setData(tags);
   }, []);
 
-  const handleBlockClick = (index) => {
+  const handleBlockClick = (item) => {
-    if (selectedItems.find((item) => item.value === data[index])) {
+    if (!selectedItems.find((el) => item === el.value)) {
-      return;
+      setSelectedItems([...selectedItems, { value: item, label: item }]);
-      // setSelectedItems(selectedItems.filter((item) => item.value !== data[index]));
-    } else {
-      setSelectedItems([...selectedItems, { value: data[index], label: data[index] }]);
     }
+    // else {
+    // setSelectedItems(selectedItems.filter((el) => item !== el.value));
+    // }
   };
 
   const handleSubmit = () => {
@@ -50,25 +67,25 @@ const Outstaffing = () => {
             <div className="col-4">
               <OutstaffingBlock
                 image={front}
-                data={data}
+                data={data.find((item) => item.name === 'front')}
                 header={'# Популярный  стек'}
-                onClick={(index) => handleBlockClick(index)}
+                onClick={(item) => handleBlockClick(item)}
               />
             </div>
             <div className="col-4">
               <OutstaffingBlock
                 image={back}
-                data={data}
+                data={data.find((item) => item.name === 'back')}
                 header={'# Популярный стек'}
-                onClick={(index) => handleBlockClick(index)}
+                onClick={(item) => handleBlockClick(item)}
               />
             </div>
             <div className="col-4">
               <OutstaffingBlock
                 image={design}
-                data={data}
+                data={data.find((item) => item.name === 'design')}
                 header={'# Популярный стек'}
-                onClick={(index) => handleBlockClick(index)}
+                onClick={(item) => handleBlockClick(item)}
               />
             </div>
           </div>

src/components/Outstaffing/OutstaffingBlock.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import style from './Outstaffing.module.css';
 
 const OutstaffingBlock = ({ text, image, data, onClick }) => {
@@ -6,9 +7,12 @@ const OutstaffingBlock = ({ text, image, data, onClick }) => {
       <img src={image} alt="img" />
       <p>{text}</p>
       <ul className={style.items}>
-        {data.map((item, index) => (
+        {data &&
-          <li key={index.toString()} onClick={() => onClick(index)}>
+          data.tags &&
-            {index} {item}
+          data.tags.length &&
+          data.tags.map((item) => (
+            <li key={item} onClick={() => onClick(item)}>
+              {item}
             </li>
           ))}
       </ul>

src/components/Select/TagSelect.js

@@ -18,7 +18,9 @@ const TagSelect = ({ selectedItems, tagSubmit, options, setSelectedItems }) => {
                   name="tags"
                   className={style.select}
                   classNamePrefix={style.select}
-                  options={options.map((item) => {
+                  options={options
+                    .flatMap((el) => el.tags)
+                    .map((item) => {
                       return { value: item, label: item };
                     })}
                 />