How do I create dynamic number of elements in React outside of JSX?

Question

In a electron-react app I run a shell command and the output is received line by line, how do I create elements dynamically and add it to DOM?

I use this method which works but, is there a better way to do this?

import Titlebar from "./components/Titlebar/Titlebar"
import { useState } from "react"

let shellOutput = []
const [currentShellOutput, setCurrentShellOutput] = useState(shellOutput)
ElectronAPI.execShellCommands(["spicetify apply"])
ElectronAPI.receive("sendToRenderer/shell-output", (outputString) => {
    console.log(outputString)
    setCurrentShellOutput((value) => {
        return value.concat([outputString])
    })
})

export default function App() {
    return (
        <>
            <Titlebar></Titlebar>
            {currentShellOutput.map((output) => (
                <p className="terminal-output">{output}</p>
            ))}
        </>
    )
}

output on left and right are same I didn't format that, so don't care about them

Answer 1

If I understand correctly, spicetify shell prints shell-exited when it finishes the work. So why don't you create an array that you fill with data in the background and render to the DOM only once the shell is exited?

const shellOutput = [];
ElectronAPI.execShellCommands(["spicetify apply"])
ElectronAPI.receive("sendToRenderer/shell-output", (outputString) => {
    if (outputString === 'shell-exited') {
        // update the state
        setCurrentShellOutput(shellOutput)
        return; // a return statement will exit the function
    }
    console.log(outputString)
    shellOutput.push(outputString);
})