fixed code
This commit is contained in:
parent
0c3d99f039
commit
778a4f6937
@ -11,17 +11,34 @@ const Outstaffing = () => {
|
|||||||
const [selectedItems, setSelectedItems] = useState([]);
|
const [selectedItems, setSelectedItems] = useState([]);
|
||||||
|
|
||||||
useEffect(() => {
|
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 = () => {
|
const handleSubmit = () => {
|
||||||
@ -50,25 +67,25 @@ const Outstaffing = () => {
|
|||||||
<div className="col-4">
|
<div className="col-4">
|
||||||
<OutstaffingBlock
|
<OutstaffingBlock
|
||||||
image={front}
|
image={front}
|
||||||
data={data}
|
data={data.find((item) => item.name === 'front')}
|
||||||
header={'# Популярный стек'}
|
header={'# Популярный стек'}
|
||||||
onClick={(index) => handleBlockClick(index)}
|
onClick={(item) => handleBlockClick(item)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-4">
|
<div className="col-4">
|
||||||
<OutstaffingBlock
|
<OutstaffingBlock
|
||||||
image={back}
|
image={back}
|
||||||
data={data}
|
data={data.find((item) => item.name === 'back')}
|
||||||
header={'# Популярный стек'}
|
header={'# Популярный стек'}
|
||||||
onClick={(index) => handleBlockClick(index)}
|
onClick={(item) => handleBlockClick(item)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-4">
|
<div className="col-4">
|
||||||
<OutstaffingBlock
|
<OutstaffingBlock
|
||||||
image={design}
|
image={design}
|
||||||
data={data}
|
data={data.find((item) => item.name === 'design')}
|
||||||
header={'# Популярный стек'}
|
header={'# Популярный стек'}
|
||||||
onClick={(index) => handleBlockClick(index)}
|
onClick={(item) => handleBlockClick(item)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import React from 'react';
|
||||||
import style from './Outstaffing.module.css';
|
import style from './Outstaffing.module.css';
|
||||||
|
|
||||||
const OutstaffingBlock = ({ text, image, data, onClick }) => {
|
const OutstaffingBlock = ({ text, image, data, onClick }) => {
|
||||||
@ -6,11 +7,14 @@ const OutstaffingBlock = ({ text, image, data, onClick }) => {
|
|||||||
<img src={image} alt="img" />
|
<img src={image} alt="img" />
|
||||||
<p>{text}</p>
|
<p>{text}</p>
|
||||||
<ul className={style.items}>
|
<ul className={style.items}>
|
||||||
{data.map((item, index) => (
|
{data &&
|
||||||
<li key={index.toString()} onClick={() => onClick(index)}>
|
data.tags &&
|
||||||
{index} {item}
|
data.tags.length &&
|
||||||
</li>
|
data.tags.map((item) => (
|
||||||
))}
|
<li key={item} onClick={() => onClick(item)}>
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -18,9 +18,11 @@ const TagSelect = ({ selectedItems, tagSubmit, options, setSelectedItems }) => {
|
|||||||
name="tags"
|
name="tags"
|
||||||
className={style.select}
|
className={style.select}
|
||||||
classNamePrefix={style.select}
|
classNamePrefix={style.select}
|
||||||
options={options.map((item) => {
|
options={options
|
||||||
return { value: item, label: item };
|
.flatMap((el) => el.tags)
|
||||||
})}
|
.map((item) => {
|
||||||
|
return { value: item, label: item };
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
<button onClick={tagSubmit} type="submit">
|
<button onClick={tagSubmit} type="submit">
|
||||||
Submit
|
Submit
|
||||||
|
Loading…
Reference in New Issue
Block a user