JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

I have an HTML table with five cells in it. Each cell has a button and a field. You do not have control over the HTML or naming conventions used for IDs, etc. Write an event handler that can be applied to each button which will call a function and write the result of that function to the field that is in the cell of the button that was clicked. Do not iterate over the cells of the table.

<table>
  <tr>
    <td><button>Button 1</button><div></div></td>    
    <td><button>Button 2</button><div></div></td>
    <td><button>Button 3</button><div></div></td>
    <td><button>Button 4</button><div></div></td>    
    <td><button>Button 5</button><div></div></td>
  </tr>
</table>

Babel + JSX

const eventHandler = document.querySelector('tr');
const getButtonText = (button) => {
	return button.innerText;
};

eventHandler.addEventListener('click', (e) => {
	const clicked = e.target;
  
	if(clicked.nodeName === 'BUTTON') { 
  	const field = clicked.nextSibling;    
    const text = getButtonText(clicked);
    
    field.innerText = text;
  }
});