0
204
ViewsReactjs add onClick attribute on a dynamic element
I trying to create a table dynamically from the data received from an ajax response in a react app. The loop is created from the response of an ajax request inside the useEffect hook. The problem is that I can't make work the onClick attribute in an anchor tag in a table cell. Below is the code.
res.data.users.forEach(function (user) {
let row = table.insertRow(rowcnt);
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
let cell3 = row.insertCell(2);
cell1.innerHTML = user.u_id;
cell2.innerHTML = user.username;
cell3.innerHTML = '<a href="javascript:void(0)"><span data-feather="edit"></span></a><a href="javascript:void(0)" onClick={(e) => deleteUser(e, ' + user.id + ')}><span data-feather="trash"></span></a>';
rowcnt++;
});
But in the frontend it is showing
Please help.
2 answers
Answer question0
The "React way" is to use:
state to maintain the data.
mapto iterate over the user data held in state and produce array of HTML for each user. Add an id to eachtrelement.filterindeleteUserfunction to filter out the row data where theu_idsdon't match the id of the deleted row, and use that array to update the state at which point the component will be re-rendered with the updated state.
const { useState } = React;
function Example({ data }) {
const [ users, setUsers ] = useState(data.users);
function deleteUser(id) {
// Call Axios with the id to delete that item
const filtered = users.filter(user => user.u_id !== id);
setUsers(filtered);
}
function getRows(users) {
return users.map(user => {
const { u_id, username } = user;
return (
<tr key={u_id} id={u_id}>
<td>{u_id}</td>
<td>{username}</td>
<td class="delete">
<a onClick={() => deleteUser(u_id)}>Delete</a>
</td>
</tr>
)
});
}
return (
<table>
{getRows(users)}
</table>
);
};
const data = {
users: [
{u_id: 1, username: 'Steve'},
{u_id: 2, username: 'Polly'},
{u_id: 3, username: 'Brian'},
{u_id: 4, username: 'Billy Joel'}
]
};
ReactDOM.render(
<Example data={data} />,
document.getElementById("react")
);.delete { background-color: red; cursor:pointer; }<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>0
I think you should use jsx to instead of innerHTML, like this:
return (
<table>
<thead>
<tr>
<th>u_id</th>
<th>usename</th>
<th>action</th>
</tr>
</thead>
<tbody>
{res.data.users.map(user => (
<tr>
<td>{user.u_id}</td>
<td>{user.username}</td>
<td>
<a onClick={(e) => deleteUser(e, ' + user.id + ')}>delete</a>
</td>
</tr>
)}
</tbody>
</table>
)