Seeking assistance with implementing functionality in a React application where buttons for editing and deleting display only when the mouse hovers over the corresponding row. Currently, the implemented code displays these buttons in all rows on hover.
Snippet of the current code:
import React from 'react';
const Contact = (props) => {
const array = Object.entries(props);
const classes = document.getElementsByClassName('btn');
const display = (isShown) => {
if (isShown) {
for (let i =0; i < classes.length; i++) {
classes[i].style.display = 'block';
}
} else {
for (let i=0; i < classes.length; i++) {
classes[i].style.display = 'none';
}
}
};
return (
<table className="table table-light">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Continent/Country</th>
<th scope="col">eMail</th>
<th scope="col">FreeGuyz</th>
<th scope="col">Instagram</th>
<th scope="col">Twitter</th>
</tr>
</thead>
<tbody>
{array.map((contact, index) => (
<tr onMouseEnter={() => { display(true); }} onMouseLeave={() => display(false);} key={index}>
<th scope='row'>{index += 1}</th>
<td>{contact[1].name}</td>
<td>{contact[1].continentAndCountry}</td>
<td>{contact[1].email}</td>
<td>{contact[1].accountNameForFreeGuyz}</td>
<td>{contact[1].accountNameForInstagram}</td>
<td>{contact[1].accountNameForTwitter}</td>
<td>
<button style={{ marginRight: 5 + 'px' }} className='btn btn-warning' id={contact.id}>Edit</button>
<button className='btn btn-danger' id={contact.id} type='submit'>Delete</button>
</td>
</tr>
))}
</tbody>
</table>
);
};
export default Contact;
If anyone can help troubleshoot this issue, it would be greatly appreciated.