Having trouble displaying the skill label on the value.map function. I've tried every possible solution I can think of, including adding text inside the span but outside value.map. The text shows up, but the selected item does not. I even console log it and it shows up. Any assistance would be greatly appreciated.
import React from 'react';
import style from './index.module.css'
import App from './App'
import { useState } from 'react';
import { useEffect } from 'react';
import { options } from './data';
const Skill =()=>{
const [isOpen, setIsOpen]=useState(false);
const [highlightedIndex, setHighlightedIndex]=useState(0);
const [value, setValue] = useState([options[0]]);
const arrLenght = value.length;
const clearOption=()=>{
onChange([]) ;
}
const isOptionSelected = (option)=>{
return arrLenght > 1 ? value.includes(option)
: option === value;
}
const onChange =(o)=>{
setValue([...value, o]);
}
useEffect (()=>{
if (isOpen) setHighlightedIndex(0);
},[isOpen])
const selectOption= (option)=>{
if(value.includes(option)){
onChange(value.filter(o => o !== option))
}else {
onChange( option)
}
}
return (
<div onBlur={()=>setIsOpen(false) }
onClick={()=>setIsOpen(prev=> !prev)} tabIndex={0}
className={style.container} >
<span className={style.value}>
{
value.map((skill)=>{
<button key={skill.value} onClick={e => {e.stopPropagation(); selectOption(skill)}} className={style['option-badge']}>
{skill.label }
{console.log(skill)}
<span className={style['remove-btn']}>×</span>
</button>
})
}
</span>
<button onClick={e =>{e.stopPropagation(); clearOption();} }
className={style['clear-btn']}>×</button>
<div className={style.divider}></div>
<div className={style.caret}></div>
<ul className={`${style.options} ${isOpen ? style.show: ''}`}>
{options.map((option, index)=>(
<li onClick={(e)=>{
e.stopPropagation();
selectOption(option);
setIsOpen(false);
onChange(option);
}
} key={option.value}
onMouseEnter={()=> setHighlightedIndex(index)}
className={`${style.option} ${isOptionSelected(option.label) ? style.selected : style.unselect}
${index === highlightedIndex ? style.highlighted: ''}`}>
{option.label}
</li>
)
)}
</ul>
</div>
)
}
export default Skill;
This is data.jsx that hold the options to be selected
export const options =[
{label: 'first', value:1},
{label: 'second', value:2},
{label: 'third', value:3},
{label: 'fouth', value:4},
{label: 'fifth', value:5},
{label: 'sixth', value:6}
];