@cideM/

timer

React

A timer that runs every second and increases value. The amount by which the value is increased can be adjusted by the user. Uses hooks.

fork
loading
Files
  • src
    • App.js
    • App.css
    • App.test.js
    • index.css
    • index.js
    • logo.svg
  • public
  • package.json

This Plugin Crashed!

Error: Error: must not create an existing file {"type":"CREATE_FILE","wid":"0.5468197682531815","path":"src/App.js","file":{"path":"src/App.js","content":{"asEncoding":{"base64":"aW1wb3J0IFJlYWN0IGZyb20gInJlYWN0IjsKaW1wb3J0ICIuL0FwcC5jc3MiOwoKZnVuY3Rpb24gU29tZUNoaWxkKHsgdmFsdWUgfSkgewogIHJldHVybiA8cD5WYWx1ZToge3ZhbHVlfTwvcD47Cn0KCmZ1bmN0aW9uIElucHV0KHsgb25DaGFuZ2UsIGlkLCB0eXBlLCB0ZXh0IH0pIHsKICByZXR1cm4gKAogICAgPGlucHV0CiAgICAgIHR5cGU9e3R5cGV9CiAgICAgIGlkPXtpZH0KICAgICAgdmFsdWU9e3RleHR9CiAgICAgIG9uQ2hhbmdlPXtlID0+IHsKICAgICAgICBvbkNoYW5nZShlLnRhcmdldC52YWx1ZSk7CiAgICAgIH19CiAgICAvPgogICk7Cn0KCmZ1bmN0aW9uIEFwcCgpIHsKICBjb25zdCBbaW5wdXQsIHNldElucHV0XSA9IFJlYWN0LnVzZVN0YXRlKGAxYCk7CiAgY29uc3QgW3gsIHNldFhdID0gUmVhY3QudXNlU3RhdGUoMCk7CiAgY29uc3Qgc2F2ZWRDYWxsYmFjayA9IFJlYWN0LnVzZVJlZigpOwoKICBSZWFjdC51c2VFZmZlY3QoKCkgPT4gewogICAgc2F2ZWRDYWxsYmFjay5jdXJyZW50ID0gKCkgPT4gewogICAgICBzZXRYKHggKyBOdW1iZXIoaW5wdXQpKTsKICAgIH07CiAgfSk7CgogIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7CiAgICBsZXQgaWQgPSBzZXRJbnRlcnZhbCgoKSA9PiB7CiAgICAgIHNhdmVkQ2FsbGJhY2suY3VycmVudCgpOwogICAgfSwgMTAwMCk7CiAgICByZXR1cm4gKCkgPT4gY2xlYXJJbnRlcnZhbChpZCk7CiAgfSwgW10pOwoKICByZXR1cm4gKAogICAgPG1haW4gY2xhc3NOYW1lPSJBcHAiPgogICAgICA8SW5wdXQgaWQ9InRpbWVyLWlucHV0IiB0eXBlPSJ0ZXh0IiB0ZXh0PXtpbnB1dH0gb25DaGFuZ2U9e3NldElucHV0fSAvPgogICAgICA8bGFiZWwgaHRtbEZvcj0idGltZXItaW5wdXQiPkVudGVyIGEgbnVtYmVyOjwvbGFiZWw+CiAgICAgIDxTb21lQ2hpbGQgdmFsdWU9e3h9IC8+CiAgICA8L21haW4+CiAgKTsKfQoKZXhwb3J0IGRlZmF1bHQgQXBwOwo="},"asBuffer":null},"loaded":true}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import React from "react";
import "./App.css";

function SomeChild({ value }) {
  return <p>Value: {value}</p>;
}

function Input({ onChange, id, type, text }) {
  return (
    <input
      type={type}
      id={id}
      value={text}
      onChange={e => {
        onChange(e.target.value);
      }}
    />
  );
}

function App() {
  const [input, setInput] = React.useState(`1`);
  const [x, setX] = React.useState(0);
  const savedCallback = React.useRef();

  React.useEffect(() => {
    savedCallback.current = () => {
      setX(x + Number(input));
    };
  });

  React.useEffect(() => {
    let id = setInterval(() => {
      savedCallback.current();
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <main className="App">
      <Input id="timer-input" type="text" text={input} onChange={setInput} />
      <label htmlFor="timer-input">Enter a number:</label>
      <SomeChild value={x} />
    </main>
  );
}

export default App;