Selected item not showing up-CodePudding

On the value.map the skill label is not showing,have trying every possible solution that I can think of, i even write text inside the span but out of value.map, it shows but the selected item is not showing up. I also try console log it , it shows. Any help we be 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']}>&times;</span>
            </button>

        })  
        
 
    }
        
     
     </span>

     <button onClick={e =>{e.stopPropagation();  clearOption();} } 

         className={style['clear-btn']}>&times;</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} 
             onm ouseEnter={()=> 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}
  ];

CodePudding user response：

You've just got your brackets wrong. A map function inside jsx return HTML, and you can return in a single line by => (<html></html>), so something like this should work now.

 {value.map((skill) => (
          <button
            key={skill.value}
            onClick={(e) => {
              e.stopPropagation();
              selectOption(skill);
            }}
          >
            {skill.label}
            {console.log(skill)}
            <span>&times;</span>
          </button>
        ))}

CodePudding user response：

You forgot return JSX from your map function.

value.map(skill => {
    return ( // You missed this return.
        <button
            key={skill.value}
            onClick={e => {
                e.stopPropagation();
                selectOption(skill);
            }}
            className={style['option-badge']}
        >
            {skill.label}
            {console.log(skill)}
            <span className={style['remove-btn']}>&times;</span>
        </button>
    );
});