Sobes.tech
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;