Design comparison
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.
Community feedback
- @jordon-youngPosted almost 3 years ago
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.
- Timeframe button clicked (each button's callback has its timeframe 'value')
- I queried the DOM for every activity-card
- 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.
1@Charlie025xPosted almost 3 years ago@jordon-young Thanks for your explaining your process. I have a general sense of how you displayed your json data after reviewing your code.
I essientaly wrote my js in a way that mimics react, to pave the way for my future react solution, while practicing some vanilla js. Unfortunately I'm still stuck, lol.
1@jordon-youngPosted almost 3 years ago@Charlie025x Managing state like React is kind of like building React from the ground up, isn't it? Sounds really complicated. Good to learn I'm sure, but not fast or easy 0.o
0 - @Charlie025xPosted almost 3 years ago
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.
0
Please log in to post a comment
Log in with GitHub
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