I'm trying to make an countdown website for a project. I want that the countdown is triggered by a button. I'm using React but i keep getting this error
React Hook "useEffect" is called in function "countdown" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter
I'm pretty new to react, can somebody give me some advice to fix the problem?
the code:
import './App.css';
import React, { useEffect, useState } from 'react';
function App() {
const time = 20;
const [count, setCount] = useState(time);
const startCount = () => {
useEffect(() => {
if (count > 0) {
setTimeout(() => setCount(count - 1), 1000);
} else {
setCount('Times up');
}
});
};
return (
<div className="App">
<div>{count}</div>
<button onClick={startCount}> start </button>
<button> pauze </button>
</div>
);
}
export default App;
You can use setInterval
instead of using setTimout
Fix your code to this:
import './App.css';
import React, { useEffect, useState } from 'react';
function App() {
const time = 20;
const [count, setCount] = useState(time);
const [isStart, setIsStart] = useState(false);
useEffect(() => {
if (isStart) {
const timer = setInterval(() => {
if (count > 0) {
setCount(count - 1)
} else {
setCount('Times up');
clearInterval(timer);
}
}, 1000);
}
}, [isStart]);
return (
<div className="App">
<div>{count}</div>
<button onClick={() => setIsStart(true)}> start </button>
<button> pauze </button>
</div>
);
}
export default App;
You're trying to add useEffect
inside a plain javascript function, that is why it throws an error that the useEffect
you called is in a function that is not a React function component.
useEffect hook don't use in any child function of body component function
import React, { useEffect, useState, useCallback } from 'react'; function App() { const [count, setCount] = useState(); useEffect(() => { if (count > 0) { setTimeout(() => setCount(count - 1), 1000); } else { setCount('Times up'); } }, [count]); return ( <> <div>{count}</div> <button onClick={() => setCount(20)}> start </button> <button> pauze </button> </>) } export default App;
useEffect should not be put inside a function. You do not need that start count function. onClick can update a state, and let useEffect listen to the change of that state.
Rules for hooks:
✅ Don't call Hooks from regular JavaScript functions.
✅ Call Hooks from React function components.
✅ Call Hooks from custom Hooks.
You are calling hook ( useEffect
) from a plane javascript function which is against the rules of hooks.
You should not call hooks in plain js functions, you can solve your issue like this
import './App.css';
import React, { useEffect, useState } from 'react';
function App() {
const time = 20;
const [count, setCount] = useState(time);
const [start, setStart] = useState(false)
useEffect(() => {
if (start) {
if (count > 0) {
setTimeout(() => setCount(count - 1), 1000);
} else {
setCount('Times up');
}
}
}, [count, start])
const startCount = () => {
setStart(true)
}
return (
<div className="App">
<div>{count}</div>
<button onClick={startCount}> start </button>
<button> pauze </button>
</div>
);
}
export default App;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.