I did this code to try to build a HOC Component
import { useState } from 'react';
function withCountState(Wrapped) {
return function (props) {
const [count, setCount] = useState(0);
return <Wrapped count={count} setCount={setCount} {...props} />;
};
}
const Wrapped = props => {
const { count, setCount } = props;
return (
<div>
<h1>Counter Functional Component</h1>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Increment count</button>
<button onClick={() => setCount(count + 3)}>Increment count</button>
<button onClick={() => setCount(count + 5)}>Increment count</button>
</div>
);
};
const EnhancedWrapped = withCountState(Wrapped);
export default EnhancedWrapped;
Is a good idea set props like count={count} setCount={setCount} {...props}
in ‘withCountState’ component, Why pass {…props} is not enough to detect my props?