JavaScript function calls are not working inside table dropdown when ReactDOMServer and innerHTML are used

Question

JavaScript functions calls are not working inside the table dropdown which is added to the DOM by innerHTML

  employeesRetrieval = e => {

    axios.post('http://localhost:5000/employeesRetrieval')
      .then( res => {

        let totalActiveEmployees = res.data[0];

        let activeEmployeesAdder = ``;

          totalActiveEmployees.forEach( ele => {

            let role = '';
            if(ele.empRole === 0){
              role = 'Admin';
            }else{
              role = 'Employee';
            }
            activeEmployeesAdder += ReactDOMServer.renderToString(
                                    <tr>
                                      <td>{ele.empId}</td>
                                      <td>{ele.empName}</td>
                                      <td>{ele.empEmail}</td>
                                      <td>{role}</td>
                                      <td className = "editColumn">

                                        <div className="btn-group">
                                          <button className="noCaret" data-toggle="dropdown" title = "Edit">
                                            <MoreVertical className = "editIcon" id = "editIcon"/>
                                          </button>
                                          <ul className="dropdown-menu" role="menu">
                                            <li className = "dropdown-item" role = "button" name = {ele.empId} onSelect = {() => this.showEmployeeUpdateModal('active', ele.empId)}>Edit details</li>
                                            <li className = "dropdown-item" role = "button" name = {ele.empId} onSelect = {() => this.directEmployeeStatusChange('inactive', ele.empId)}>Make inactive</li>
                                          </ul>
                                        </div>

                                      </td>
                                    </tr>
                                  );
          });
          document.getElementById('activeEmployeesLoader').style.display = "none";
          document.getElementById('activeEmployeesTableContent').innerHTML = activeEmployeesAdder;

After opening the dropdown:

No response or error is coming after clicking them. I tried changing everything like onClick attributes and changing ul and li to select and option tags. Nothing seems to work for me.

The two functions :

showEmployeeUpdateModal = (e, id) => {
      console.log('INSIDE THE FUNCTION');
      /*
         SOME LOGIC
      */
    };

directEmployeeStatusChange = (e, id) => {
      console.log('INSIDE THE FUNCTION');
      /*
         SOME LOGIC
      */
    };

Answer 1

You are using ReactDOMServer.renderToString on that chunk of code that includes your event listeners.

As the name suggests, renderToString gives you plain HTML, so the event handlers won't work as written.

Have a look at a similar question React.js Serverside rendering and Event Handlers