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

JavaScript
1

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} />
		</button>
	);
}

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`}
			</h2>

			<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`}>
					{state}
				</p>
				
				<AddValueBtn id={`${id}-increment`} btnIcon={faArrowUp} valueAddedOnClick={1} stateSetter={stateSetter} />
			</div>
		</div>
	);
}

const DEFAULT_SESSION_LENGTH = 25;
const DEFAULT_BREAK_LENGTH = 5;

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} />
		</div>
	);
}
2

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.

3

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
https://github.com/YourFBIAgent/reactjs-25-5-clock

4

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.

5

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

Thanks a lot for the help.

6

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