I have this simple requirement that detects which button is clicked. The code is as below:
import React, { useState } from 'react'
const App = () => {
const data = [
['Hotel 1A', ['A']],
['Hotel 1B', ['B']],
]
const [sameText, setSameText] = useState(false)
const changeText = (e: any, index: number, item: any) => {
console.log(e.target.value)
console.log(index)
console.log(item)
if ((item[e.target.value] = item[index])) {
setSameText(true)
}
}
return (
<div className='mx-auto'>
<div className='flex p-16'>
{data.map((item, index) => (
<div className='mx-16' key={index}>
<div className='p-12'>
<button onClick={(e) => changeText(e, index, item)} value={index}>
{item[0]}
</button>
<div>{sameText ? 'C' : item[1][0]}</div>
</div>
</div>
))}
</div>
</div>
)
}
export default App
The code above will display text as below:
Hotel 1A Hotel 1B
A B
If I click on Hotel 1A, I have like A to be changed to C and if I click on Hotel 1B, only B will change to C. I thought I need to get the value of the button but I could not get it to work.
Any help would be greatly appreciated.