Do you know how this code can use in Next.js?

[Elindo]

I have this function here like this:

const Hydraulic = () => {
  function myFunction() {
    useEffect(() => {
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[1];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }, []);
  }
  return (

Which is later on being called in the body from an input like this:

 <input
            type="text"
            id="myInput"
            onChange={myFunction()}
            placeholder="Search for Part Number.."
            title="Type in a name"
          />

^^^ I am not getting any error in the console or anywhere… it just doesn’t run, as if the function is never activated.

In a plain html website the input looks like this below… I changed it to onChange just for Nextjs… but it doesn’t activate anything…

<input
        type="text"
        id="myInput"
        onkeyup="myFunction()"
        placeholder="Search for Part Number.."
        title="Type in a name"
      />

[DanCouper]

The return value of myFunction is undefined.

So onChange={myFunction()} is the exact same thing as writing onChange={undefined}

onChange accepts a callback function, not some other arbitrary value. It is essentially exactly same thing as addEventListener("change", /* callback here */). Every time there is a change event, the function executes. undefined is not a function, if you try to execute it it will just cause JS to throw an error.

---

Next thing is that you’re calling a function that contains code in a useEffect hook (which is a mechanism for keeping values in sync), that’s not going to do anything.

[Elindo]

Apparenlty this worked:
onKeyUp={myFunction}

And yes, the useEffect wasn’t needed… I was using it because of some error, but the error went away after changing the code …

[DanCouper]

@Elindo

Apparenlty this worked:
onkeyup={myFunction}

You mean onKeyUp, I assume? But yes, myFunction is a function, it’s a reference to something that produces a value if called. Whereas myFunction() is whatever the return value is (undefined in this case)