The name of the "selected" class is not added on click: When I click on the image, the "select" class ,
it is not added, please help

const {selectedAvatar,setSelectedAvatar} = useState(undefined)  
return (
    
      <Container>
        <div className='title-container'>
            <h1>Bir avatarı seçiniz</h1>
        </div>
        
        <div className="avatars">
          {avatars.map((avatar,index)=>{
            
            return(
              
              <div key={index} className={`avatar ${selectedAvatar === index ? "selected":"" }`}>
                  
                { <img
                  src={urlEdit(avatar.avatar)}
                  alt="avatar"
                  onClick={()=>{setSelectedAvatar(index)}}
                
                />}
                
              </div>
            )
          })}
        </div> 
        <button>SEÇ</button>
      </Container>
      <ToastContainer/>
    )

CodePudding user response：

The useState return values should be wrapped in square brackets, like so:

const [selectedAvatar, setSelectedAvatar] = useState(undefined);