A text editor UI in React that sends commands to Redis database

Question

I am trying to write a React UI that right now is just a text area, but eventually be a code editor, maybe monaco-editor, but it will look something like this:

import { useState } from "react";
import ReactDOM from "react-dom";
// import TextEditor from "./sheets/text-editor";

const App = () => {
  const [input, setInput] = useState("");
  const [result, setResult] = useState("");

  const onClick = () => {
    console.log(input);
  };

  return (
    <div>
      <textarea
        value={input}
        onChange={(e) => setInput(e.target.value)}
      ></textarea>
      <div>
        <button onClick={onClick}>Submit</button>
      </div>
      <pre>{result}</pre>
    </div>
  );
};

export default App;

And I want it to take the Redis command and send it to a Redis database and then get back the result inside that <pre> element there.

This assumes the React app is connected to that database.

How can I write the logic that would need to go inside something like that onClick handler? For example, would any of the logic below be useful?

https://github.com/lujiajing1126/redis-cli/blob/master/src/executor.ts

I am expecting something like:

  const onClick = () => {
    client.send_command(input, args, callback);
  };