Reactjs add onClick attribute on a dynamic element

Question

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.

You should use createElement and appendChild instead of innerHTML = "element string" for much more readable code. Your onClick is also confusing, what are you trying to do with it? — Jesper
– Jesper, Commented Sep 13, 2021 at 9:46
I think you don't use react at it should be, maybe it will be better to set the given data inside a state, and construct your table depending on it... no ? — BENARD Patrick
– BENARD Patrick, Commented Sep 13, 2021 at 9:49

Andy · Accepted Answer · 2021-09-13 10:30:44Z

3

The "React way" is to use:

state to maintain the data.
map to iterate over the user data held in state and produce array of HTML for each user. Add an id to each tr element.
filter in deleteUser function to filter out the row data where the u_ids don'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>

edited Sep 13, 2021 at 10:30

answered Sep 13, 2021 at 10:07

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Akhilesh Over a year ago

In delete function I need to call axios and delete data from database, then refresh the table.

Andy Over a year ago

I can only provide a small example of how you should approach the problem. There was no mention of Axios in your question, but just calling Axios within that function with the row id should be very simple.

Akhilesh Over a year ago

But the users data is also getting from the axios call. So what is the use of useState?

Andy Over a year ago

Because that's how React deals with data. State updates, then the component updates.

Akhilesh Over a year ago

But I cannot use useState inside axios. I am getting error

React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

|

Shemea Xu · Accepted Answer · 2021-09-13 09:49:35Z

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>
)

answered Sep 13, 2021 at 9:49

Shemea Xu

11 bronze badge

2 Comments

Akhilesh Over a year ago

The loop is created from the response of an ajax request inside the useEffect hook.

Akhilesh Over a year ago

The table is already there. I am just creating the rows.

Collectives™ on Stack Overflow

Reactjs add onClick attribute on a dynamic element

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related