• It is totally unclear from the description that the color of the top of the border should be set to a random color instead of the default "null" when the component is actually mounted, so this should at least be stated explicitly in the description.

    But actually, the "random color" thing does not seem to add much value to this Kata and is IMO rather distracting. Perhaps consider removing it altogether?

  • Needs "true" random tests, on top of the current mocked Math.random() values

  • Needs more fixed tests and random tests. For example, try simulating input values of different length and see if selection on clicking works properly to prevent hardcoding.

  • Offline listener was tested but online listener should be tested as well.

  • const wrapper = mount();
    expect(wrapper.children().props().style.borderTop).toEqual('10px solid pink');

    reallly not cllear what need to do with it, who can help?

  • You should not use getElementById method here. Just use event.target during handling the event.

  • To make this kata even more useful for learning it's worth adding a short description of custom hooks. Why they are used, when and how. A reference to a reactjs.org texts could help too.

  • it sounds pity but I made "fitting the response" otherwise I wouldn't discuss here anything

  • my solution is not using hooks because it didn't work as I expected and I've rewritten it with class then

  • your solution is not using hooks at all since you cannot use hooks inside class components. so your import of useState and useRef is pointless. there is no need to use refs anyway if you implement a function component with hooks.

  • This comment is hidden because it contains spoiler information about the solution

  • Hey,

    I got this issue :
    TypeError: Cannot read property 'focus' of null
    function selectText() {
    const input = document.getElementById('input-name');
    input.focus();
    console.log(input);
    input.setSelectionRange(0,10000);
    }

    At this test : handles click and change events properly

    the thing is my code runs perfectly on CodeSandbox

  • bad kata i ever seen
    need fix Datails ( not a single word about the element div in which there should be a number value)
    and + and - located incorrectly

  • Hello, What method i need to use after "render", i tried using lifecycle methods but it didnt work?

  • The "increment" button has text '-' and the "decrement" button has text '+'.

    Also I agree with @FArekkusu, I don't know React and

    expect(wrapper.children().props().style.borderTop).toEqual('10px solid pink'); instead of null

    is really confusing

  • Loading more items...