25 + 5 clock component "works" but doesn't pass test

I’m in the early stages of working on this challenge and so far I have attempted to make a component that can be used to increment and decrement a value, but for some reason certain tests fail, some examples below:

When I click the element with the id of “break-increment”, the value within id=“break-length” increments by a value of 1, and I can see the updated value.

  1. When I click the element with the id of “session-increment”, the value within id=“session-length” increments by a value of 1, and I can see the updated value.

I should not be able to set a session or break length to > 60.

I have tried but have no clue why this keeps happening, when I test these conditions on my own there seems to be no issue.
Below I have posted the code to the 3 components I have made so far that resulted in these test errors.

Thanks in advance for the time.

const MIN = 1;
const MAX = 60;

function AddValueBtn({ id, btnIcon, valueAddedOnClick, stateSetter }) {
	const onClickHandler = () => stateSetter(state => {
		const newState = state + valueAddedOnClick;

		return (newState > MAX)? MAX : (newState < MIN)? MIN : newState;

	return (
		<button id={id} className='cursor-pointer' onClick={onClickHandler}>
			<FontAwesomeIcon icon={btnIcon} />
function DurationControlContainer({ id, state, stateSetter }) {
	return (
		<div className="flex flex-col justify-center items-center gap-2">
			<h2 className="capitalize text-2xl" id={`${id}-label`}>
				{`${id} length`}

			<div className="flex justify-center items-center gap-5">
				<AddValueBtn id={`${id}-decrement`} btnIcon={faArrowDown} valueAddedOnClick={-1} stateSetter={stateSetter} />
				<p className="text-lg" id={`${id}-length`}>
				<AddValueBtn id={`${id}-increment`} btnIcon={faArrowUp} valueAddedOnClick={1} stateSetter={stateSetter} />

function App() {
    const [sessionLength, sessionLengthSetter] = useState(DEFAULT_SESSION_LENGTH);
    const [breakLength, breakLengthSetter] = useState(DEFAULT_BREAK_LENGTH);

	return (
		<div className="flex gap-40">
			<DurationControlContainer id="session" state={sessionLength} stateSetter={sessionLengthSetter} />
			<DurationControlContainer id="break" state={breakLength} stateSetter={breakLengthSetter} />

Post a GitHub repo or a StackBlitz/CodeSandbox.

As we can’t really help you without seeing all the code, or a live example, the only suggestion I have is to try using the old ReactDOM.render method or downgrade to React 17. The tests have some issues with React 18.

I’ve tried to downgrade to React 17 but it still doesn’t seem to work. Gonna try to check is it possibly a browser issue since I am using waterfox.

Here’s the repo link

I’m pretty sure you have to implement the reset button for the tests to work. Otherwise, it can’t reset the values and will look at some old values.

I see, I’ll try to implement it and see how it goes.

Thanks a lot for the help.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.