This works but is slow to render large updates

.npmrc

@@ -0,0 +1,2 @@
+package-lock=false
+engine-strict=true

.nvmrc

@@ -0,0 +1 @@
+21.5.0

package.json

@@ -1,17 +1,18 @@
 {
-  "name": "neat-stuff",
+  "name": "regex-gui",
   "version": "1.0.0",
   "dependencies": {
-    "bootstrap": "5.2.3",
-    "gh-pages": "5.0.0",
-    "open-graph": "^0.2.6",
-    "prop-types": "^15.7.2",
+    "bootstrap": "5.3.2",
+    "gh-pages": "6.1.1",
+    "open-graph": "0.2.6",
+    "prop-types": "15.8.1",
     "react": "18.2.0",
-    "react-bootstrap": "2.7.2",
+    "react-bootstrap": "2.9.2",
     "react-dom": "18.2.0",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
   },
-  "description": "Links to cool stuff",
+  "description": "Simple gui for running a regex against a word list",
   "main": "index.js",
   "scripts": {
     "predeploy": "npm run build",
@@ -24,8 +25,8 @@
     "fix": "eslint 'src/**.js' 'src/**/*.js' --fix"
   },
   "devDependencies": {
-    "eslint": "^7.32.0",
-    "eslint-plugin-react": "^7.25.1"
+    "eslint": "8.56.0",
+    "eslint-plugin-react": "7.33.2"
   },
   "author": "Robert Curtin",
   "license": "MIT",

src/App.js

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
-import Links from './Links';
 import Intro from './Intro';
+import RegexWidget from './RegexWidget';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 class App extends Component {
   render () {
     return <div className='App'>
       <Intro />
-      <Links />
+      <RegexWidget />
     </div>;
   }
 }

src/Intro.js

@@ -11,7 +11,7 @@ function Intro() {
       <Row>
         {PadRemainingSpace}
         <Col>
-          Stuff Robert thought was neat!
+          <a href='https://www.debuggex.com/cheatsheet/regex/javascript'>Javascript regex cheat sheet</a>
         </Col>
         {PadRemainingSpace}
       </Row>

src/RegexWidget.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ListGroup, ListGroupItem, Accordion, Button, Form } from 'react-bootstrap';
+import dictionary from './dictionary.json';
+
+function RegexWidget(props) {
+  const [result, setResult] = React.useState([]);
+  const [regex, setRegex] = React.useState("Enter regex");
+  const [useFixedLength, setUseFixedLength] = React.useState(false);
+
+  const handleSubmit = async (event) => {
+    const regexp = new RegExp(useFixedLength ? '^' + regex + '$' : regex, 'ig');
+    event.preventDefault();
+    event.stopPropagation();
+    setResult(dictionary.filter(a => regexp.test(a)));
+  };
+
+  const handleRegexChanged = (e) => {
+    console.log(e);
+    setRegex(e.target.value);
+  };
+
+  const handleFixedLengthCheckboxChange = (e) => {
+    console.log(e);
+    setUseFixedLength(e.target.value);
+  };
+
+  return <div className='RegexWidget'>
+    <Form>
+      <Form.Group className="mb-3" controlId="formBasicEmail">
+        <Form.Check label="Fixed length" onChange={handleFixedLengthCheckboxChange} />
+        <Form.Control type="email" placeholder="Enter regex" onChange={handleRegexChanged} />
+      </Form.Group>
+
+      <Button variant="primary" type="submit" onClick={handleSubmit}>
+        Submit
+      </Button>
+    </Form>
+    <ListGroup>
+
+    {
+      result.map((a) => {
+        return <ListGroup.Item key={a}>{a}</ListGroup.Item>;
+      })
+    }
+    </ListGroup>
+  </div>;
+}
+
+export default RegexWidget;
+