Junior — Senior
Detect and fix bugs in a React component
livecode
Task condition
This task presents a React component containing several syntactic and logical errors. The goal is to identify them and suggest a correct version of the code.
import React from 'react';
const PleaseRevIewMe = () => {
const [count, setCount] = React.useState(1);
const [items, setItems] = React.useState([{ id: 1 }]);
React.useLayoutEffect(() => {
document.addEventListener('click', () => {
setInterval(() => console.log(count), 1000);
});
});
const click = React.useCallback(() => {
setCount(prevCount => prevCount + 1);
setItems([...items, { id: count + 1 }]);
}, [items, count]);
return (
<React.Fragment>
Current count: {count}
<ul>
{items.map((item) => (
<li key={item.id}>{item.id}</li>
))}
</ul>
<button onClick={click}>add one</button>
</React.Fragment>
);
};
export default PleaseRevIewMe;