JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table1">
    <tr>
        <td>Ячейка 1.1</td>
        <td>Ячейка 1.2</td>
    </tr>
    <tr>
        <td>Ячейка 1.3</td>
        <td>Ячейка 1.4</td>
    </tr>
</table>

<table id="table2" class="hidden">
    <tr>
        <td>Ячейка 2.1</td>
        <td>Ячейка 2.2</td>
    </tr>
    <tr>
        <td>Ячейка 2.3</td>
        <td>Ячейка 2.4</td>
    </tr>
</table>
        
<input type="BUTTON" id="button" value="Show" onclick="tableToggle()" />

CSS

.hidden {
    display: none;
}

JavaScript

tableToggle = function() {
    switch (button.value)
    {
        case 'Show':
            table1.style.display = 'none';
            table2.style.display = 'block';
            button.value = 'Hide';
        break;
        case 'Hide':
            table2.style.display = 'none';
            table1.style.display = 'block';
            button.value = 'Show';
        break;
        case '':
            alert('Something wrong!');
        break;
    } 
}