onChange event not working when build html code by function - REACTJS

Question

I have a .js file with a component code that build a page containing:

• a table with filters (in the example below just a combo box)

• a table with data

• a button "close"

    const My_Component = (props) => {
  
        //My state declaration, other constants, other functions,  etc...
  
        function handleChange(event) {
            const VALUE = event.target.value;
            console.log('VALUE=' + JSON.stringify(VALUE)  );            
        }
  
  
        const build_CodiceHtml = (HANDLE_onChange__Arg ) => {
                let HTML_CODE= '<select onChange="{' + HANDLE_onChange__Arg + '}" name="MY_NAME" value="MY_VALUE" size="sm" className="text-center"  >';
                HTML_CODE=HTML_CODE + '<option value="1">AAAAA</option>';
                HTML_CODE=HTML_CODE + '<option value="2">BBBBB</option>';
                HTML_CODE=HTML_CODE + '<option value="3">CCCCC</option>';
                HTML_CODE=HTML_CODE + '</select>';
  
                return  HTML_CODE;
        }
  
  
  
  
        const getTableFiltri = () => {
  
            let result=''; 
  
            result = result + '<table cellpadding="20" style="border:1px solid black;margin-left:auto;margin-right:auto;"><tbody>';
            result = result + '<tr className="justify-content-md-center"  ><td>';
            result = result +  build_CodiceHtml(handleChange);
            result = result + '</td></tr>';
            result = result + '</tbody></table>';
  
            return result;
        }
  
  
  
  
        const getTableWithValue = () => {
            //......
        }
  
  
  
  
  
        return (
  
            <div>
                <Modal show={props.isOpen} size="xl">
  
                    <Modal.Header>
                        <Modal.Title>
                           <section>MY_TITLE</section> 
                        </Modal.Title>
                    </Modal.Header>
  
                    <Modal.Body className="modalBody">
  
                        <div dangerouslySetInnerHTML={{ __html: getTableFiltri() }} />
  
                        { getTableWithValue() }
  
                    </Modal.Body>
  
                    <Modal.Footer>
                        <Button variant="secondary" onClick={props.toggle}>Close</Button>
                    </Modal.Footer>
  
                </Modal>
            </div>
        )
  
    }
  

Just consider that I need to build the combobox html by a function (in the real life I have some algorithms in order to build the html code of filters). When a combobox item is selected it should be called the "handleChange()" function. This code doesn't work because the "handleChange()" function is not called, nothing happen when I select a combobox item.

Moreover, if I have a look to the page analysis of browser I get:

<select onchange="{function handleChange(event) {
    var VALUE = event.target.value;
    console.log('VALUE=' + JSON.stringify(VALUE));
  }}"  name="2" value="1" size="sm" classname="text-center"  >
  <option value="1">AAAAA</option>
  <option value="2">BBBBB</option>
  <option value="3">CCCCC</option>
</select>

How can I solve this problem?

Answer 1

Yeah Nicholas Tower is right. If you still want to do it your way, then you need to remove the double quotes to make it work.

const build_CodiceHtml = (HANDLE_onChange__Arg ) => {
  let HTML_CODE= `
  <select onChange="(${HANDLE_onChange__Arg})(event)" name="MY_NAME" value="MY_VALUE" size="sm" className="text-center"  >';
    <option value="1">AAAAA</option>
    <option value="2">BBBBB</option>
    <option value="3">CCCCC</option>
  </select>`

  return  HTML_CODE;
}

Answer 2

I don't see a reason why dangerouslySetInnerHTML is needed. dangerouslySetInnerHTML is an escape hatch that's occasionally needed to bypass react and put raw html onto the page, but if you can stick to using standard react JSX elements, that will make your code simpler (not to mention safer). It will also fix your onChange issue, because react will hook up the onChange function for you.

For example:

const build_CodiceHtml = (HANDLE_onChange__Arg) => {
  return (
    <select
      onChange={HANDLE_onChange__Arg}
      name="MY_NAME"
      value="MYVALUE"
      size="sm"
      className="text-center"
    >
      <option value="1">AAAAA</option>
      <option value="2">BBBBB</option>
      <option value="3">CCCCC</option>
    </select>
  );
};

const getTableFiltri = () => {
  return (
    <table
      cellPadding="20"
      style={{
        border: "1px solid black",
        marginLeft: "auto",
        marginRight: "auto",
      }}
    >
      <tbody>
        <tr className="justify-content-md-center">
          <td>{build_CodiceHtml(handleChange)}</td>
        </tr>
      </tbody>
    </table>
  );
};

// ...
<Modal.Body className="modalBody">
  <div>{getTableFiltri()}</div>
  {getTableWithValue()}
</Modal.Body>;