React without hooks

// ----------  Production code version 1.03  ----------

import React, { useState } from 'react';
import { renderTopSection } from './TopSection';

export default function MainSection() {

    const [_, update] = useState(0);

    const render = () => update( _ => ++_);

    let testDataArray;

    try {
        testDataArray = JSON.parse(localStorage.getItem('testData'));
    } catch (error) {
        console.log('code: 1003');
    } finally {
        testDataArray = testDataArray ?? ['one', 'two', 'three'];
        localStorage.setItem('testData', JSON.stringify(testDataArray));
    }

    function createLiElement() {
        const inputElement = document.querySelector(".create-li");
        const newLiItem = inputElement.value;
        testDataArray.push(newLiItem);
        localStorage.setItem('testData', JSON.stringify(testDataArray));
        inputElement.value = "";
        renderTopSection();
        render();
    }

    const ereseData = () => {
        localStorage.setItem('testData', "");
        render();
    }

        return (
            <>
                <ul>
                    { testDataArray.map((item, index) => <li key={index}>{item}</li>) }
                </ul>
                <input type="text" className="create-li" onKeyDown={ (e) => {e.key === "Enter" && createLiElement()} }/>
                <button style={{ marginTop: "10px" }} type='button' onClick={ createLiElement }>Create</button>
                <button style={{ marginTop: "10px" }}  type='button' onClick={ ereseData }>Erase this section</button>
                <button style={{ marginTop: "10px" }}  type='button' onClick={ () => { ereseData(); renderTopSection(); }}>Erase both section</button>
            </>
        );
}



// ---------------  Development code  ---------------

import React, { useState } from 'react';

export default function TestComponent() {

const [state, update] = useState(0)

// Universal update function
function triggerUpdate() {
    update((state) => state +1);
}

let testDataArray;

try {
    testDataArray = JSON.parse(localStorage.getItem('testData'));
} catch (error) {
    console.log('No data in the Local Storage');
}

if(!testDataArray) {
    // Simulate fetching data from the server
    testDataArray = ['one', 'two', 'tree'];

    //Pushing data to the local storage
    localStorage.setItem('testData', JSON.stringify(testDataArray));
}

function createLiElement() {
    const inputElement = document.querySelector(".create-li");
    const newLiItem = inputElement.value;
    testDataArray.push(newLiItem);

    //POST request to the server with the New Data

    //Pushing data to the Local Storage as well
    localStorage.setItem('testData', JSON.stringify(testDataArray));

    //Clear the input field
    inputElement.value = "";

    triggerUpdate();
}

function ereseData() {
    localStorage.setItem('testData', "");
    triggerUpdate();
}

    return (
        <>
            <ul>
                {testDataArray.map((item, index) => <li key={index}>{item}</li>)}
            </ul>
            <input type="text" className="create-li" onKeyDown={(e) => {e.key === "Enter" && createLiElement()}}/>
            <button type='button' onClick={ createLiElement }>Create</button>
            <button type='button' onClick={ ereseData }>Erase Data</button>
        </>
    );
}