How to make table row selectable in ReactJS (No React Table) - reactjs

Question

What I tried to achieve is to make the table row clickable with input element so it will select the entire row. Only the problem is how can I add something like a border when the user checks the input field.
<tbody>
{allHotels.map((p: any, index: number) => (
<TableRow key={p.id} selectRow={true}>
{console.log(p.checked)}
<td><input type="checkbox" defaultChecked={p.checked} onClick={() => toggleCheckbox(index)} /></td>
<td>{p.name}</td>
<td>{p.address}</td>
<td>{p.rating}</td>
</TableRow>
))}
</tbody>

Answer 1

The toggleCheckbox function should update the state value representing the checked/unchecked row state.
Given that the selectRow prop on the TableRow component represents the row state, the code could look something like below:
function Hotels() {
const [allHotels, setAllHotels] = useState([]);
useEffect(() => {
fetch('/api/hotels')
.then((response) => response.json())
.then((hotels) => hotels.map((hotel) => ({ ...hotel, selected: false })))
.then(setAllHotels);
}, []);
const toggleCheckbox = (index) => {
const newHotels = [...allHotels];
newHotels[index].selected = !newHotels[index].selected;
setAllHotels(newHotels);
};
return (
<tbody>
{allHotels.map((hotel, index) => (
<TableRow key={hotel.id} selectRow={hotel.selected}>
<td>
<input
type="checkbox"
defaultChecked={hotel.checked}
onClick={() => toggleCheckbox(index)}
/>
</td>
<td>{hotel.name}</td>
<td>{hotel.address}</td>
<td>{hotel.rating}</td>
</TableRow>
))}
</tbody>
);
}
Please note that the code needs to be updated according to your needs. But I hope you get the idea.