title: React Error : (function) is not defined at HTMLButtonElement.onclick
body: <p>I am using ReactJS and I am creating a button "remove" in a method called <code>showData()</code> and appending it to a row in a table of people.<br/>
  I am setting its attribute <code>onclick</code> to my method <code>removePerson()</code> implemented in the same class of the method <code>showData()</code>.</p>
  
  <p>This is all good until I click on the button "remove" - then an error shows:</p>
  
  <blockquote>
    <p>ReferenceError: removePerson() is not defined at HTMLButtonElement.onclick</p>
  </blockquote>
  
  <p>This is my code:</p>
  
  <pre><code>showData() {
  
          let localStoragePersons = JSON.parse(localStorage.getItem("personsForms"));
          persons = localStoragePersons !== null ? localStoragePersons : [];
  
  
          let table = document.getElementById('editableTable');
          let x = table.rows.length;
          while (--x) {
              table.deleteRow(x);
          }
          let i = 0;
          for (i = 0; i &lt; persons.length; i++) {
              let row = table.insertRow();
              let firstNameCell = row.insertCell(0);
              let lastNameCell = row.insertCell(1);
              let birthdayCell = row.insertCell(2);
              let salaryCell = row.insertCell(3);
              let choclatesCell = row.insertCell(4);
              let genderCell = row.insertCell(5);
              let workTypeCell = row.insertCell(6);
              let hobbiesCell = row.insertCell(7);
              let descriptionCell = row.insertCell(8);
              let colorCell = row.insertCell(9);
  
  
              firstNameCell.innerHTML = persons[i].firstName;
              lastNameCell.innerHTML = persons[i].lastName;
              birthdayCell.innerHTML = persons[i].birthday;
              salaryCell.innerHTML = persons[i].salary;
              choclatesCell.innerHTML = persons[i].Choclates;
              genderCell.innerHTML = persons[i].Gender;
              workTypeCell.innerHTML = persons[i].workType;
              hobbiesCell.innerHTML = persons[i].Hobbies;
              descriptionCell.innerHTML = persons[i].Description;
              colorCell.innerHTML = persons[i].favoriteColor;
              colorCell.style.backgroundColor = persons[i].favoriteColor;
  
              let h = persons[i].ID;
  
  
              let removeButton = document.createElement('button');
              removeButton.setAttribute('onclick', 'removePerson(' + h + ')')
              removeButton.innerHTML = 'Remove';
              row.appendChild(removeButton);
          }
      }
  </code></pre>
  
  <p>I tried to change the code </p>
  
  <pre><code>removeButton.setAttribute('onclick', 'removePerson(' + h + ')');
  
  </code></pre>
  
  <p>to</p>
  
  <pre><code>removeButton.onclick = this.removePerson(h);
  </code></pre>
  
  <p>but everyTime the "showData()" method runs this method "removePerson()" run also and i don't want this to happen.</p>
  
  <pre><code>
  
      removePerson(ID) {
          alert(ID);
          let table = document.getElementById('editableTable');
          if (persons.length === 1) {
              table.deleteRow(1);
              persons.pop();
              localStorage.setItem("personsForms", JSON.stringify(persons));
          }
  
          let target;
          let i;
          for (i = 0; i &lt; persons.length; i++) {
              if (persons[i].ID === ID) {
                  target = persons[i].firstName;
                  persons.splice(i, 1); break;
              }
          }
  
          for (i = 1; i &lt; table.rows.length; ++i) {
              let x = table.rows[i];
              if (x.cells[0].innerHTML === target) {
                  table.deleteRow(i); break;
              }
          }
  
          let temp = [];
          let j = 0;
          for (i = 0; i &lt; persons.length; ++i) {
              if (persons[i] !== null) {
                  temp[j++] = persons[i];
              }
          }
          persons = temp;
          localStorage.clear();
          localStorage.setItem("personsForms", JSON.stringify(persons));
          this.showData();
      }
  </code></pre>