Using React click events - how to trigger function on click of element outside of component

1

Hey coders,

I followed a vanilla JS tutorial here and am now redoing it in react.

Excuse my explanation. If I misuse terms please correct me.

The tutorial has you enter info into a form. It then stores that data. Then a function wraps the data in HTML and injects it into a table on the page. There are 3 data input fields. When wrapping in HTML an extra column is added. The extra column is used to create a button. You can see it in the tutorial here where the addBookToList function is being created…

My question is about this button. In the vanilla project you listen for this button click with this:

 document.querySelector("#book-list").addEventListener("click", (e) => {...

How can I do this in react? Would I be using an event listener? Or is that what lifecycles are for?

2

Check the docs and complete the React part of the curriculum.

1 Like
3

Thanks tips. I did that already.

I’m not using a button element. I don’t know if you looked at the code in the video I linked to but the button is created like this in the last <td>:

row.innerHTML = `
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.isbn}</td>
<td><a href="#" class='btn btn-danger btn-sm delete'>X</a></td> `;

The code above is part of a function that gets called by a component. This code is in a separate js file that gets imported into the component. It creates a new row. I’m trying to listen for a click on the <a> tag inside the last <td>.

That row gets inserted into <tbody> below.

    1 import React from "react";
    2  
    3 class Table extends React.Component {
    4   render() {
    5     return (
    6       <table className="table table-striped mt-5">
    7         <thead>
    8           <tr>
    9             <th>Title</th>
   10             <th>Author</th>
   11             <th>ISBN#</th>
   12             <th></th>
   13           </tr>
   14         </thead>
   15         <tbody id="book-list"></tbody>
   16       </table>
   17     );                                  
   18   }
   19 }
   20 export default Table;

If the component above had a button element I understand how to use a click event. In this case, new rows will be added by a function outside the component. That’s where I get stuck.

I’m thinking the issue is that to get the result I want there is a better/different way to do this in React?

4

If you need the functionality of a function in a parent component, but you have to trigger it in a child component, you can pass the function down as a prop to the child. The child will call the function but the actual function will be executed inside the parent. So you can handle the logic in the parent but call it from the child.

Look at the example given in the Lifting State Up docs. About halfway down it starts to show this. The child gets passed the function as a prop and triggers it inside its own handler function.

You can add the “button” back to the table but don’t use a <a> element the a11y linter will yell at you for having an inaccessible link (if you are using CRA at least).

We really need to see the full code to know more about how you are doing things. You can put the code on codesandbox so we can see what you have.