DEV Community: Kaho Shibuya

Form Event Fires on Button Render : A Pesky Gotcha in React's Rendering Process

Kaho Shibuya — Tue, 25 May 2021 22:11:02 +0000

This post is a note that explains the issue and its cause and solution(s).

I created the web app that fetches the users' information and shows them as a list. It also has the functions to edit or delete them.

The final code is here.

What is the issue?

The issue was that the edit button seemed not working.

The code of the component with the issue is here.
You can also interact with the code here.

What causes?

Actually, the edit button works fine.

The reason why it seemed not working is because the edit button's onClick event ends after the component gets re-rendered.

Inspection

Added console.log and checked what happens when clicking the edit button.

loaded!  // the page loaded
editComment is now: false // initial state

// click the edit button

Edit button is clicked! 
editComment is now: true 
handleSave is called! 
editComment is now: false

According to the logs, the following happens under the hood.

the edit button is clicked.
the edit button's onClick event runs and updates state editComment which is now true. (It was false as an initial state)
the component gets re-rendered.
handleSave function is executed for some reason and updates state editComment back to false.
the component gets re-rendered.

The edit button works but the save button, I mean, handleSave function gets executed at the same time.

Since these things happen very quickly, we cannot see it and it looks the edit button is not working.

The following code is the simplified version of the render part of the Comment component.

render(){
  return this.state.editComment ? (
    <tr>
     <td><form id="form1" onSubmit={this.handleSave}></form></td>
     <td><input form="form1" type="text" name="name"/></td>
     <td><input form="form1" type="email" name="email"/></td>
     <td><input form="form1" type="text" name="body" /></td>
     <td><button form="form1" type="submit">Save</button></td>
    </tr>
  ):(
  <tr>
   <td />
   <td>{this.state.name}</td>
   <td>{this.state.email}</td>
   <td>{this.state.body}</td>
   <td>
    <button onClick={() => this.setState({ editComment: true })}>Edit</button>
    <button onClick={() => handleDelete()}>Delete</button>
   </td>
  </tr>
  )
}

state editComment is false at first, so there shouldn't be form and the save button yet.

Weird!

Then why is handleSave function called?
Again, it is because the edit button's onClick event ends after the component gets re-rendered.

Facts

After clicking the edit button, form gets created.

Since the edit button and the save button lie in the similar structure, so React regards these two as the DOM elements of the same type. In other word, React cannot differentiate these two buttons.

// simplified version
// before re-render
  <tr>
   <td />
   <td>
    <button onClick={() => this.setState({ editComment: true })}>Edit</button>
    <button onClick={() => handleDelete()}>Delete</button>
   </td>
  </tr>



// after re-render
  <tr>
   <td>
    <form id="form1" onSubmit={this.handleSave}></form>
   </td>
   <td>
    <button form="form1" type="submit">Save</button>
   </td>
  </tr>

When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes.

https://reactjs.org/docs/reconciliation.html#dom-elements-of-the-same-type

So, the edit button is not destroyed. It remains there and just gets updated its attributes and properties.

It is still the edit button with extra attributes such as from="form1" or type="submit" saying "save", so to speak.

Then still the button's onClick persists.

When the button's onClick event ends, the button is associated with form and calls handleSave function.

Solution(s)

Add e.preventDefault() to the edit button's onClick.
It won't call onSubmit(= handleSave function) in form.
Create new components for each DOM underlying the condition inside render().
When the component is re-rendered, the new button(= the save button) is created rather than updating the existed button(= the edit button).
The edit button's onClick event is no longer listened.
Add key to the edit button and save button respectively.
Inform React that these two buttons are different by adding key.
https://reactjs.org/docs/reconciliation.html#keys

Apparently, this is a super niche edge case.

Using a table layout or placing the form's items outside form may cause the issue.

Considering accessibility or readability carefully when building the structure could prevent errors.

This is the lesson that I learned this time!

Acknowledgements

To understand this issue clearly, I popped into a bunch of web dev communities and asked around for this.

I'm really grateful to people in these communities for trying to help me with this. Again, thank you so much🙏

Special thanks to Kohei Asai, Daniel Corner, Brandon Tsang, Shogo Wada.

How to Create the Updatable Table with Vanilla JS

Kaho Shibuya — Tue, 16 Mar 2021 12:10:01 +0000

This is how I created the updatable table with Vanilla JavaScript. I also share the issue that I encountered.

What I created

I created the "Menu Management System" app, which enables a cafe or a restaurant to easily update its menu. (It could be great if the print function is added)
You can see the demo movie and the code.

How It Works

First, set an empty table in HTML and create the default array in JavaScript.

let food = [
    {
        name: 'French Toast',
        price: 7.99,
        popularity: '★★',
    },
    {
        name: 'Hawaiian Pancake',
        price: 9.99,
        popularity: '★★★',
    },
    {
        name: 'Omelet',
        price: 5.99,
        popularity: '★★',
    }
];

Then, when the page is loaded the following function executes to show the default version of the table.

const tBody = document.querySelector('tbody');

function updateTable() {
    const tableData = food
        .map((item) => {
            return `
    <tr>
    <td>${item.name}</td>
    <td>$${item.price}</td>
    <td>${item.popularity}</td>
    <td><i class="fas fa-times-circle"></i></td>
    </tr>
    `;
        })
        .join('');

  tBody.innerHTML = tableData;
}

When a new item is added by clicking the "Add Item" button, push the new item to food array. Then, update the whole table. The function is below.

const addBtn = document.querySelector('.btn-outline-primary');

function addItem() {
    const name = document.querySelector('#name');
    const price = document.querySelector('#price');
    const popularity = document.querySelector('#popularity');
    const obj = {};
  if(name.value !== '' && price.value !== '' && popularity.value !== ''){
    obj.name = name.value;
    obj.price = price.value;
    obj.popularity = popularity.value;
    food.push(obj);
    updateTable(); //update the table once again here.
    name.value = '';
    price.value = '';
    popularity.value = 'Select Popularity';
  }
}

addBtn.addEventListener('click', addItem);

To delete all items, I first came up with creating the loop function that goes through(loops over) all <tr> nested in <tBody> and remove all.

...and this is where I got stuck!

Issue!!!

For the "Clear All" button, I simply created the following loop function.

const tBody = document.querySelector('tbody');
const tableRows = tBody.getElementsByTagName('tr');

function clearAllItem() {
  for(let i = 0; i < tableRows.length; i++){
    tableRows[i].remove();
  }
  food = [];
}

However, it deletes some of the rows; not all of them.
It looked like this.
This has to do with the way for-loop iteration behaves.

With the code above, the function clearAllItem runs the following ways.

1. First-time run

Table at the moment

CHOICE	PRICE	POPULARITY
French Toast	$7.99	★★
Hawaiian Pancake	$9.99	★★★
Omelet	$5.55	★★

i = 0
tableRows.length = 3
i is less than tableRows.length

The function executes tableRows[0].remove();, then "French Toast" row and its data is gone.

2. Second-time run

Table at the moment

CHOICE	PRICE	POPULARITY
Hawaiian Pancake	$9.99	★★★
Omelet	$5.55	★★

i = 1
tableRows.length = 2
i is less than tableRows.length

The function executes tableRows[1].remove();, then "Omelet" row and its data is gone.

3. Third-time run

Table at the moment

CHOICE	PRICE	POPULARITY
Hawaiian Pancake	$9.99	★★★

i = 3
tableRows.length = 1
i is greater than tableRows.length ❌

The function won't execute any and the loop stops here.

The "Hawaiian Pancake" row still remains.

Solution

To avoid the problem, I set the for-loop backward.

function clearAllItem() {
  for(let i = tableRows.length - 1; i >= 0; i--){
    tableRows[i].remove();
  }
  food = [];
}

Let's break this down.

1. First-time run

Table at the moment

CHOICE	PRICE	POPULARITY
French Toast	$7.99	★★
Hawaiian Pancake	$9.99	★★★
Omelet	$5.55	★★

tableRows.length = 3
i = tableRows.length - 1 = 2
i is greater than 0

The function executes tableRows[2].remove();, then "Omelet" row and its data is gone.

2. Second-time run

Table at the moment

CHOICE	PRICE	POPULARITY
French Toast	$7.99	★★
Hawaiian Pancake	$9.99	★★★

tableRows.length = 2
i = tableRows.length - 1 = 1
i is greater than 0

The function executes tableRows[1].remove();, then "Hawaiian Pancake" row and its data is gone.

2. Third-time run

Table at the moment

CHOICE	PRICE	POPULARITY
French Toast	$7.99	★★

tableRows.length = 1
i = tableRows.length - 1 = 0
i is equal to 0

The function executes tableRows[0].remove();, then "French Toast" row and its data is gone.

Now, all items are gone🎉🎉

This would be a good solution when dealing with elements of a live HTML collection.

This one is a very simple app, but storing data to local storage or database makes this app more functioning for use in practice!

The Mystery of Rotate Method in HTML Canvas

Kaho Shibuya — Fri, 26 Feb 2021 06:22:38 +0000

Following this w3school's tutorial, I created an analog clock with HTML canvas.

In the process of creating it, I encountered the mystery of canvas and it puzzled me a lot!
However, thanks to Stack Overflow (I mean thanks to Kaiido who answered my question), I think I understand how HTML canvas works.

Now, I share my understanding.

What is the problem?

There are five steps in the tutorial and "Clock Numbers" was the Chinese Wall for me.
In this section, you place each number upright in the right position of the clock.

The function drawNumbers, the following, makes it happen.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let radius = canvas.height/2;
ctx.translate(radius, radius);
radius = radius * 0.9;

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius * 0.15 + "px arial";
  ctx.textBaseline = "middle";
  ctx.textAlign = "center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius * 0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius * 0.85);
    ctx.rotate(-ang);
  }
}

In the for-loop in the function, you can see there are a bunch of rotate methods.

They look like rotating and rotating back several times and it confused me.

Since there was no detailed explanation on w3school's tutorial, I had no clues! (Please add it!)

What's happening in this for loop is...

First, let's see how 1 will be placed and break it down to see what happens on each line of the code. (only inside of for-loop)

ang is π/6 radian that is equal to 30 degrees.
ctx.rotate(ang) rotates the entire canvas 30 degrees clockwise.
Since the rotation center point is changed from the origin to the center of the clock by using ctx.translate(radius, radius); (see the final code here), it rotates like the image below.

The yellow square shows the original position while the gray square shows the position at the moment.
Assume the gray one as being on the yellow one and gets rotated 30 degrees.
Plus, the green circle is the rotation center point set as a reference.
ctx.translate(0, -radius * 0.85); moves the entire canvas its y-direction. The value is negative, so it goes up.

Since the canvas now is rotated 30 degrees, the y-direction looks going diagonal way.
ctx.rotate(-ang) rotates the entire canvas 30 degrees counter-clockwise.
ctx.fillText(num.toString(), 0, 0); shows the number, which is 1 this time.

The number is upright and positions in the right place.
However, if you "fillText" at the wrong timing, the number would look different. Take a look at the example below.
Assuming you "fillText" before rotating the entire canvas back.
```
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius * 0.85);
ctx.fillText(num.toString(), 0, 0); //"fillText" before rotating back.
ctx.rotate(-ang);
ctx.rotate(ang);
ctx.translate(0, radius * 0.85);
ctx.rotate(-ang);
}
```
The number is on the tilt.
Be careful and make sure when to use which method!
Again, ctx.rotate(ang) rotates the entire canvas 30 degrees clockwise.
ctx.translate(0, radius * 0.85); moves the entire canvas its y-direction. This time, the value is positive, so it goes down.
ctx.rotate(-ang) rotates the entire canvas 30 degrees couter-clockwise. It comes back to the original position.

That's all process for one number. After getting back the position to the original, the same thing happens in turn till it gets to number 12.

You cannot actually see how the canvas transforms, so it was hard for me to understand what's going on, especially rotate method.

This is my understanding and an attempt to visualize the process, so if you notice something wrong here please leave a comment and point them out.

Thank you!

How Does Sort Method Work in JavaScript?

Kaho Shibuya — Sun, 21 Feb 2021 08:07:12 +0000

Basic Understanding of Sort Method

The sort() method, as its name suggests, sorts every element in an array.

By default, the elements are converted into strings and sorted in ascending order based on UTF-16 code unit values.

If the array contains various types of characters such as signs, numbers, and letters with different cases, the order would be like this; signs * > numbers > upper case letters > lower case letters.
*with exceptions

const array = ["lettuce", 6, 10, "cabbege", "/", "tomato", "Cucumber", "onion", "Squash", 3, "!"];

array.sort();

console.log(array);

// --> ["!", "/", 10, 3, 6, "Cucumber", "Squash", "cabbege", "lettuce", "onion", "tomato"]

Customizing Sort Order — CompareFunction

When sorting the array that only has numbers, how do you think the elements would be ordered?

Let’s take a look at what happened with the example below.

const array = [1, 200, 55, 421, -14, -23, 1000];

array.sort();

console.log(array);

// --> [-14, -23, 1, 1000, 200, 421, 55]

I believe it was not what you expected.

As described above, the sort() method converts every element into a string, so it won’t sort them by numerical order.

However, with compareFunction, you can customize sort order as you wish so that you can fix this issue. See the example below.

const array = [1, 200, 55, 421, -14, -23, 1000];

array.sort(function compareFunction(a, b){
  return a - b;
});
//arrow function ver.
//array.sort((a, b) => a - b);

console.log(array);

// --> [-23, -14, 1, 55, 200, 421, 1000]

By setting two arguments a and b, and returns a certain value, you can manipulate how to sort. In this example, a represents the element which sort() method compares with the next element while b represents the next element which a is compared with.

The compareFunction has two types of forms.

When an array contains only numbers as the last example, the form can be like the following. It’s assumed that the array does not contain Infinity and NaN! Please remove them if they exist!

const array = [1, 0, 4, 3, -1, -3, 2];

array.sort((a, b) => b - a); //descending order

console.log(array);

// --> [4, 3, 2, 1, 0, -1, -3]

If it is not the case, the form can be like the following.

const array = ["lettuce", "cabbege", "tomato", "cucumber", "onion", "squash"];

array.sort(function compareFunction(a, b){ //descending order
  if(a > b){
    return -1;
  } else if(b > a){
    return 1;
  }
});

console.log(array);

// --> ["tomato", "squash", "onion", "lettuce", "cucumber", "cabbege"]

The sort() method shown in the example above acts differently according to its return value. (in the last example, it returns 1 or -1 )
Also, the compareFunction must have the return value or it causes an error.

If compareFunction(a, b) returns less than 0, leave a and b unchanged.

If compareFunction(a, b)returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAScript standard only started guaranteeing this behavior in 2019, thus, older browsers may not respect this.

If compareFunction(a, b) returns greater than 0, sort b before a.

Let’s break down what’s happening here with the last example.

Firstly, a represents "lettuce" and b represents "cabbege".
Comparing these two elements, the condition a > b is true and returns –1.
Nothing changes here.

["lettuce", "cabbege", "tomato", "cucumber", "onion", "squash"];

Now, a is "cabbege" and b is "tomato". The function returns 1 this time, so "tomato" comes before "cabbege" .

["lettuce", "tomato", "cabbege", "cucumber", "onion", "squash"];

This time, comparing "lettuce" as a with "tomato" as b, it returns 1 again. The order changes like the following.

["tomato", "lettuce", "cabbege", "cucumber", "onion", "squash"];

Continuing these steps, each element gets compared, like a round-robin tournament, and changes order respectively.
In consequence, an array gets sorted as intended.

Thanks to compareFunction, the sort() method can work with an associative array, which means it sorts values accessing each with keys (properties).
The following example sorts the age of each Disneyland from the oldest to the youngest.

const array = [
  { name: 'Disneyland Park', location: 'California', open: 1955 },
  { name: 'Tokyo Disneyland', location: 'Chiba', open: 1983 },
  { name: 'Hong Kong Disneyland', location: 'Lantau Island', open: 2005 },
  { name: 'Disneyland Paris', location: 'Coupvray', open: 1992 }
];

array.sort((a, b) => { //sort old to young
  const now = new Date();
  const thisYear = now.getFullYear();
  return (thisYear - b.open) - (thisYear - a.open);
}); 

console.log(array);

// -->
//[
//{ name: 'Disneyland Park', location: 'California', open: 1955 },
//{ name: 'Tokyo Disneyland', location: 'Chiba', open: 1983 },
//{ name: 'Disneyland Paris', location: 'Coupvray', open: 1992 },
//{ name: 'Hong Kong Disneyland', location: 'Lantau Island', open: 2005 }
//]

Heads-up!

Last but not least, this method acts on the existing array unlike map() or filter().

If you need to keep an original array, declare a new variable and assign a copy of the original array using slice() method. Then, sort the copy.

const array = [1, 0, 4, 3, -1, -3, 2];
const sorted = array.slice();

sorted.sort((a, b) => b - a);

console.log(`Original array: [${array}]`);
console.log(`Sorted array; [${sorted}]`);

// -->
//"Original array: [1,0,4,3,-1,-3,2]"
//"Sorted array; [4,3,2,1,0,-1,-3]"

Reference:
Array.prototype.sort() — JavaScript | MDN
【JavaScript入門】sort()による配列・文字列・オブジェクトのソート方法 | 侍エンジニアブログ