Skip to content
Submitted about 3 years ago

made with React and SCSS

sass/scss, react
Charlie•360
@Charlie025x
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I have just completed this challenge using React.js.

First I worked on a Vanila JS solution that utilizes state and a fetch request to render cards for every category object in the data.json. However I hit a wall getting all the cards to rerender when I changed the value on the state. So I just switched to using React and after taking the time to relearn React, I got my cards rendering and rerendering perfectly on state change.

May I have tips on how to further optimized my jsx code? Or even on fixing the Vanilla JS version's branch. I'd appreciate any feedback.

Code

Please log in to post a comment

Log in

Community feedback

  • Jordon Young•120
    @jordon-young

    I'm not sure if looking at my project would help. I'll try to explain what I did in plain English.

    First of all, I didn't try to keep track of state or re-render elements.

    When the page loads, my script grabs the JSON data and hands it to the timeframe button 'click' event handlers. The 'data' is in the event handler callback, so I didn't have to think about making it accessible outside of my setup script.

    Actually displaying the data depends on your HTML, IDs, and classes.

    1. Timeframe button clicked (each button's callback has its timeframe 'value')
    2. I queried the DOM for every activity-card
    3. I iterated over the activity-cards using their specific activity and timeframe to pull from the data object and set the corresponding elements' innerText

    How I grabbed the correct elements was a mix of IDs and CSS Classes. I made the ID for each activity-card the activity name, and I had an element inside each card for .hours and .previous-hours.

  • Charlie•360
    @Charlie025x

    UPDATE* I have just completed this challenge using React.js, using a map method on the data.json to render the cards. All I had to do was convert my html to jsx, impliment a few lines of code from my original js file to the React's .jsx files, and relearn how state and props work.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord