# Pastebin pMXa3PAh
function Prompt(props) {
  const { onGenerate } = props;
  const [prompt, setPrompt] = useState<string>();

  const callbackFunction = React.useCallback(
    (event: React.FormEvent) => {
      console.log(event);
      event.preventDefault();
      onGenerate(prompt);
    },
    [prompt, onGenerate]
  );

  return (
    <div className="prompt">
      <div>
        <h3>ListenBrainz Radio playlist generator</h3>
      </div>
      <form className="row" onSubmit={callbackFunction}>
        <div className="col-sm-10">
          <input
            type="text"
            className="prompt-text form-control form-control-lg"
            id="prompt"
            placeholder="Enter prompt..."
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
          />
        </div>
        <div className="col-sm-2">
          <button type="submit" className="btn btn-lg btn-primary">
            Generate
          </button>
        </div>
      </form>
      <div className="">
        <a href="https://troi.readthedocs.io/en/lb-radio/lb_radio.html">
          documentation
        </a>
      </div>
    </div>
  );
}