Toggle specific row with hooks - reactjs

Question

Error in toggleHidden(key) [error: expecting 0 args but got 1] . kindly suggest corrections top toggle with key for particular row.
code
const [isOpen, setIsOpen] = React.useState(false);
const toggle = () => setIsOpen(!isOpen);
const[isHidden , setIsHidden] = React.useState(true)
const toggleHidden = () => setIsHidden(!isHidden)
const data = [
{
"name": "gvf",
"email": "abc",
"companyname": "xyz",
"address": "abcy"
},
{
"name": "abi",
"email": "dhf",
"companyname": "dhd",
"address": "fhfh"
}
]
return (
<div>
<Row>
<Col>
<table className="table table-hover table-striped table-sm">
<thead className="thead-dark">
<tr>
<th>Name</th>
<th>Email</th>
<th>CompanyName</th>
<th>Address</th>
</tr>
</thead>
<tbody>
{data.map((a , key) => (
<tr key={key}>
<td><Button onClick = {toggleHidden}>Click</Button>
{!isHidden && <p>Hello ABIII</p> }
</td>
<td>{a.name}</td>
<td>{a.email}</td>
<td>{a.address}</td>
<td>{a.companyname}</td>
</tr>
))}
</tbody>
</table>
</Col>
)
}

Answer 1

Just change the state to be an array and "pop"/"push" keys into it on toggle, then declare a curried handler that accepts a key, and performs proper toggle logic. I removed isOpen state since it was not used in the example, however you can change it the same way that isHidden state and toggler was changed:
const [ isHiddenList, setIsHiddenList ] = React.useState([])
const toggleHidden = key => () => {
setIsHiddenList(
isHiddenList.includes(key)
? isHiddenList.filter(existingKey => existingKey !== key)
: [ ...isHiddenList, key ]
);
};
const data = [
{
"key": "1"
"name": "gvf",
"email": "abc",
"companyname": "xyz",
"address": "abcy"
},
{
"key": "2"
"name": "abi",
"email": "dhf",
"companyname": "dhd",
"address": "fhfh"
}
]
return (
<div>
<Row>
<Col>
<table className="table table-hover table-striped table-sm">
<thead className="thead-dark">
<tr>
<th>Name</th>
<th>Email</th>
<th>CompanyName</th>
<th>Address</th>
</tr>
</thead>
<tbody>
{
data.map(({ key, name, email, companyname, address }) => {
const isHidden = isHiddenList.includes(key);
return (
<tr key={key}>
<td><Button onClick={toggleHidden(key)}>Click</Button>
{!isHidden && <p>Hello ABIII</p> }
</td>
<td>{a.name}</td>
<td>{a.email}</td>
<td>{a.address}</td>
<td>{a.companyname}</td>
</tr>
);
})
}
</tbody>
</table>
</Col>
</Row>
</div>
)
disclaimer - key should be part of data items for consistency, dynamically generated iteration index does not guarantee that keys will be assigned properly.