jsfiddle: "Unclosed regular expression" and "Expected ')'"

This is my first time using jsfiddle so there may be something I don't understand. I am trying to paste my work from VS Code to jsfiddle to show other people but get an error:

jsfiddle: https://jsfiddle.net/u5mhj4ro/1/

My buttons get the error "Unclosed regular expression"

<button id="new-array-button" onClick={() => newArray()}>New Array</button>
<button id="merge-sort-button" onClick={() => mergeSort(arr)}>Merge Sort</button>
<button id="bubble-sort-button" onClick={() => bubbleSort(arr)}>Bubble Sort</button>

When I put slashes so that the button closing tag becomes <//button> the error seems to go away.

But then another error comes up: Expected ')' for the below line:

return (
    <div id="main-container">

There seem to be even more errors than what I initially saw. Am I misunderstanding jsfiddle?

Solution

In basic online code editors, the way to write and run JSX is to put it in a plain <script> tag that gets transpiled by Babel that uses references to a global React object.

React isn't imported, since you're not in a module - it's put on the window by a prior <script> tag.

Use:

const { useState, useEffect } = React;

const numberOfBars = 5; // Default is 75
const barHeight = 7;

function SortingVisualizer() {

etc, and your code will run.

https://jsfiddle.net/tL5h0ro3/

const { useState, useEffect } = React;

const numberOfBars = 5; // Default is 75
const barHeight = 7;

function SortingVisualizer() {
    const [arr, setArr] = useState([]);

    useEffect(() => {
        newArray();
    }, [])

    function newArray() {
        const tempArr = [];
        for(let i = 0; i < numberOfBars; i++) {
            tempArr.push(Math.floor(Math.random() * 100) + 5)
        }
        setArr(tempArr);
    }

    return (
        <div id="main-container">

            <button id="new-array-button" onClick={() => newArray()}>New Array</button>
            <button id="merge-sort-button" onClick={() => mergeSort(arr)}>Merge Sort</button>
            <button id="bubble-sort-button" onClick={() => bubbleSort(arr)}>Bubble Sort</button>

            <div id="bar-container">

                {arr.map((value, index) => (
                    <div
                        className='bar'
                        key={index}
                        style={{
                            backgroundColor: "aquamarine",
                            height: `${value * barHeight}px`
                        }}
                    />
                ))}

            </div>
        </div>
    )
}

ReactDOM.render(<SortingVisualizer />, document.querySelector("#app"))

#new-array-button {
    position: absolute;
}

#merge-sort-button {
    position: absolute;
    left: 100px;
}

#bubble-sort-button {
    position: absolute;
    left: 200px;
}

#bar-container {
    align-items: flex-end;
    background-color: lightgray;
    display: flex;
    height: 730px;
    justify-content: center;
}

.bar {
    margin: 0 2px;
    width: 20px;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id='app'></div>

For example, the above results in the complete, runnable HTML being:

<!DOCTYPE html>
<html>
<head>
    <style>
        #new-array-button {
    position: absolute;
}

#merge-sort-button {
    position: absolute;
    left: 100px;
}

#bubble-sort-button {
    position: absolute;
    left: 200px;
}

#bar-container {
    align-items: flex-end;
    background-color: lightgray;
    display: flex;
    height: 730px;
    justify-content: center;
}

.bar {
    margin: 0 2px;
    width: 20px;
}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
</head>
<body>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id='app'></div>
    <script type="text/babel">
        const { useState, useEffect } = React;

const numberOfBars = 5; // Default is 75
const barHeight = 7;

function SortingVisualizer() {
    const [arr, setArr] = useState([]);

    useEffect(() => {
        newArray();
    }, [])

    function newArray() {
        const tempArr = [];
        for(let i = 0; i < numberOfBars; i++) {
            tempArr.push(Math.floor(Math.random() * 100) + 5)
        }
        setArr(tempArr);
    }

    return (
        <div id="main-container">

            <button id="new-array-button" onClick={() => newArray()}>New Array</button>
            <button id="merge-sort-button" onClick={() => mergeSort(arr)}>Merge Sort</button>
            <button id="bubble-sort-button" onClick={() => bubbleSort(arr)}>Bubble Sort</button>

            <div id="bar-container">

                {arr.map((value, index) => (
                    <div
                        className='bar'
                        key={index}
                        style={{
                            backgroundColor: "aquamarine",
                            height: `${value * barHeight}px`
                        }}
                    />
                ))}

            </div>
        </div>
    )
}

ReactDOM.render(<SortingVisualizer />, document.querySelector("#app"))
    </script>
</body>
</html>