Updating single item in react state hook

Question

I have array useState hook which consists of items with className. I want to update className of a single item from that hook. How do I update single value of a useState hook.Of course I am going to put condition before updating . here is the code -

 display.map( word => 
   ( Words[leftPointer] === word.props.children ? 
      {...display, word:(<span key={uuid()} className="singleWord greenword"> 
      {Words[leftPointer]}</span>)} :
        display )
        )
 setDisplay(display)

here display contains array of span. what I want is go change the className based on the condition example- after updating the item className = "singleWord greenword" should be className="singleWord" of that item.

Answer 1

Map function will return a new array so you just have to store the array in a new variable and set the state with that new variable

const newDisplay = display.map( (word) =>{ 
    if(Words[leftPointer] === word.props.children){
      return {word:(<span key={uuid()} className="singleWord greenword"> 
      {Words[leftPointer]}</span>)}
    }else{
        return word
    }
  })
  setDisplay(newDisplay)