I have an array useState(list of words) called list.There are 4 items in the list and I want to update the 2nd item(for example) of that list.I am using map function to display them. Here is the code(demo code) -

const word = ['a','b','c','d']
const [list, setList]=useState([])

for(let I=0; I<4;I  ) 
{setList(<span className='black'>word[I])</span>}
  
 function colorChane(n){

  How to change color of a 
  word based on the number 
   provided ??if I provide 2 
   then the word with the 
    index 2 should change to 
  color.className should 
  change like className= 'red'
  How to update the className
  Of list item.
 }

list.map(w => {w})
colorChange(2)

CodePudding user response：

Try this

import { useState } from 'react'

export default function App() {
  const words = ['Hi!', 'How', 'are', 'you']
  const [selectedWordIndex, setSelectedWordIndex] = useState()

  return (
    <div>
      <button
        onClick={() => {
          setSelectedWordIndex(2)
        }}
      >
        Change color of second word
      </button>
      
      {words.map((word, index) => {
        const isSelected = selectedWordIndex === index
        const className = isSelected ? 'red' : 'black'
        return (
          <span key={word} className={className}>
            {word}
          </span>
        )
      })}
    </div>
  )
}

Ps. if the answer will be helpful, please give the thumbs up :)