ascent.js

import { useState } from 'react';

import { deleteToSort } from './sortingByDeletion.js';

const SYNTAX_ERROR = 'Please enter a comma-separated list of numbers.';

export function Ascent() {
  const [input, setInput] = useState('30, 10, 60, 20, 40, 50, 0');
  const onInputChange = (event) => setInput(event.target.value);

  const list = input.split(',').map((value) => value.trim()).filter((value) => value.length > 0).map(Number);
  const output = list.some(Number.isNaN) ? SYNTAX_ERROR : `[${deleteToSort(list).join(', ')}]`;

  return (
    <section>
      <div>
        <label>Input list to simplify:<br />
          <input
            type={'text'}
            autoComplete={'off'}
            value={input}
            onChange={onInputChange} />
        </label>
      </div>
      <hr />
      <div>
        <label>Sorted sequence after the fewest possible deletions:<br />
          <code><output>{output}</output></code>
        </label>
      </div>
    </section>
  );
}