React Js Download Text on Click

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.14.6/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const { useState } = React;

function App() {
        const [textareaContent, setTextareaContent] = useState(
          "React.js is a progressive JavaScript framework for building user interfaces. It allows developers to create dynamic and interactive web applications by combining declarative templates, component-based architecture, and reactive data binding. Vue.js is lightweight, flexible, and easy to integrate with existing projects."
        );

const downloadText = () => {
          const text = textareaContent; // Get the content from the textarea

// Create a new Blob object with the text content
          const blob = new Blob([text], { type: "text/plain" });

// Create a temporary <a> element and set its download attribute to specify the file name
          const link = document.createElement("a");
          link.href = URL.createObjectURL(blob);
          link.download = "file.txt"; // Replace with your desired file name

// Programmatically click the link to trigger the download
          link.click();

// Clean up the URL.createObjectURL by revoking the object URL after some time
          setTimeout(() => {
            URL.revokeObjectURL(link.href);
          }, 100);
        };

return (
          <div class="container">
            <h3>React Js Download Text on click</h3>
            <textarea
              value={textareaContent}
              onChange={(event) => setTextareaContent(event.target.value)}
            ></textarea>
            <button onClick={downloadText}>Download Text</button>
          </div>
        );
      }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
  
  
  .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px;
  height: 100vh;
}

h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

textarea {
  width: 300px;
  height: 150px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  resize: none;
}

button {
  padding: 10px 20px;
  border-radius: 4px;
  background-color: #4caf50;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

button:hover {
  background-color: #45a049;}

</style>
  </body>
</html>