Ad
  • Default User Avatar

    I couldn't get it working on the site for some reason, unable to import ReactDOM I guess, this is the solution I came up with just creating my own app and doing it there

    import React, { useState } from "react";

    function App() {
    const [changeValue, setChangeValue] = useState(0);

    const incrementHandler = () => {
    setChangeValue(changeValue + 1);
    }

    const decrementHandler = () => {
    setChangeValue(changeValue - 1);
    };

    return (
    div>
    h1>{changeValue} /h1>
    button onClick={incrementHandler}>Increment /button>
    button onClick={decrementHandler}>Decrement /button>
    /div>
    );
    }

    export default App;

    rendering done in a different file obviously.

    Wouldn't post with the html div and h tags, removed the opening " < " which is why it looks a bit funny. Just imagine they're there.

  • Custom User Avatar

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

  • Custom User Avatar

    this's my solution !

    import React,{ useState } from 'react';

    const ManagingEvent = () => {

    const [count, setCount] = useState(0)

    const handleCounter = e => {
    e.target.id === "increment" && setCount(count + 1)
    e.target.id === "decrement" && count > 1 && setCount(count - 1)
    e.target.id === "counter" && setCount(e.target.value)
    }

    return(






    )

    }

  • Custom User Avatar

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

  • Custom User Avatar

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

  • Custom User Avatar

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

  • Custom User Avatar

    yea, struggled with that too for the ungodly amount of time until realized that i am missing ids which i didnt think this kata checks for...Had to look at test cases to figure it out. good learning experience though!

  • Custom User Avatar

    Thanks for the suggestion, I've added tests for the existence of those id's so it should give better errors now!

  • Custom User Avatar

    I think in this kata it's more helpful to have separate tests for the existence of #counter, #increment and #decrement, otherwise there are errors when they're used and the error message is quite cryptic.

  • Custom User Avatar

    excecuteRender function removed from the tests.

  • Custom User Avatar

    Thanks, added docs to the readme and removed the onClick handlers from the initial solution.

  • Custom User Avatar

    I noticed in the start solution file the onClick handlers are set on the button.
    I was thinking they should be removed and let the trainee implement them on the button so they can try themselves. I think this will provide better learning.
    Also explaining more about ReactJS event handles in the description with an example to help the trainee.

    The React docs has good examples about events https://reactjs.org/docs/handling-events.html

  • Custom User Avatar

    Noticed the function executeRender in the test is not used.

  • Custom User Avatar

    Missed that! Have added them now.
    Thanks for the feedback on my first kata.

  • Custom User Avatar

    Thankyou, updated.

  • Loading more items...