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)
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 :)