lambda change for random number

src/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react"
 import logo from "./logo.svg"
 import "./App.css"
+import TrainSimulator from './TrainSimulator';
 
 class LambdaDemo extends Component {
   constructor(props) {
@@ -38,9 +39,10 @@ class App extends Component {
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
           <p>
-            Edit <code>src/App.js</code> and save to reload.
+           Hi Neil Edit <code>src/App.js</code> and save to reload.
           </p>
           <LambdaDemo />
+          <TrainSimulator/>
         </header>
       </div>
     )

src/TrainSimulator.js

@@ -0,0 +1,111 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+function TrainSimulator() {
+  const [speed, setSpeed] = useState(0);
+  const [throttle, setThrottle] = useState(0);
+  const [pressure, setPressure] = useState(0);
+  const [isRunning, setIsRunning] = useState(false);
+  const intervalRef = useRef(null);
+  const logRef = useRef(null);
+
+  useEffect(() => {
+    if (isRunning) {
+      intervalRef.current = setInterval(() => {
+        //console.log({ speed, throttle, pressure });
+        const logElement = document.createElement('div');
+        logElement.innerText = JSON.stringify({ speed, throttle, pressure });
+        logRef.current.appendChild(logElement);
+        if (logRef.current) {
+          logRef.current.scrollTop = logRef.current.scrollHeight;
+        }
+
+      }, 1000);
+    } else {
+      clearInterval(intervalRef.current);
+    }
+
+
+
+
+    return () => {
+      clearInterval(intervalRef.current);
+    };
+  }, [isRunning, speed, throttle, pressure]);
+
+  const startSimulation = () => {
+    setIsRunning(true);
+  };
+
+  const stopSimulation = () => {
+    setIsRunning(false);
+  };
+
+  const handleSpeedChange = (event) => {
+    setSpeed(event.target.value);
+  };
+
+  const handleThrottleChange = (event) => {
+    setThrottle(event.target.value);
+  };
+
+  const handlePressureChange = (event) => {
+    setPressure(event.target.value);
+  };
+
+
+  return (
+    <div>
+    <div style={{ maxHeight: '200px', overflowY: 'auto', marginTop: '20px' }} ref={logRef} />
+
+      <div>
+        <label htmlFor="speed">Speed:</label>
+        <input
+          type="range"
+          id="speed"
+          name="speed"
+          min="0"
+          max="100"
+          value={speed}
+          onChange={handleSpeedChange}
+        />
+        <span>{speed}</span>
+      </div>
+      <div>
+        <label htmlFor="throttle">Throttle:</label>
+        <input
+          type="range"
+          id="throttle"
+          name="throttle"
+          min="0"
+          max="100"
+          value={throttle}
+          onChange={handleThrottleChange}
+        />
+        <span>{throttle}</span>
+      </div>
+      <div>
+        <label htmlFor="pressure">Pressure:</label>
+        <input
+          type="range"
+          id="pressure"
+          name="pressure"
+          min="0"
+          max="100"
+          value={pressure}
+          onChange={handlePressureChange}
+        />
+        <span>{pressure}</span>
+      </div>
+      <div>
+        {isRunning ? (
+          <button onClick={stopSimulation}>Stop</button>
+        ) : (
+          <button onClick={startSimulation}>Start</button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+
+export default TrainSimulator;

src/lambda/hello.js

@@ -1,8 +1,10 @@
 // this uses the callback syntax, however, we encourage you to try the async/await syntax shown in async-dadjoke.js
 export function handler(event, context, callback) {
   console.log('queryStringParameters', event.queryStringParameters)
+  let x = (Math.random(1,100) *100);
+  const myMsg = 'Hello Cris, Your number is ' + x;
   callback(null, {
     statusCode: 200,
-    body: JSON.stringify({ msg: 'Hello, World!' }),
+    body: JSON.stringify({ msg: myMsg }),
   })
 }