Why I am doing this:
I have noticed, that I am not coding as much as I would like to.
To solve this problem and stay accountable to myself, I will write a weekly coding reflection.
Morale
7/10
Currently focussing on
Learning the fundamentalf of ReactJS.
What I did & learned
Project: getUp - React App
I managed to save the data the user enters in the counter of the ReactJS App in the local storage of the browser.
Instead of using the useState Hook, I used the useLocalStorageHook to save the state of the Hours and Minutes.
Before
const [countHours, setCountHours] = useState(0);
const [countMinutes, setCountMinutes] = useState(30);
After
const [countHours, setCountHours] = useLocalStorage("Hours", 5); // ๐๐พ
const [countMinutes, setCountMinutes] = useLocalStorage("Minutes", 30); // ๐๐พ
The next problem I faced, was that the values were saved in local storage, but when I refreshed the page, the values resetted.
I solved this by passing the localstorage key as a prop to the component.
Before
<QuantityPicker
value={30}
max={60}
min={0}
onChange={(value) => setCountMinutes(value)}
smooth
/>
After
<QuantityPicker
value={Minutes} // ๐๐พ
max={60}
min={0}
onChange={(value) => setCountMinutes(value)}
smooth
/>
Biggest obstacle?
Right now I am having problems with styling and adding navigation. I tried to shortcut this by searching for navigation components but have not found any that I like so far.
Next Challenge
- Add Navigation
- Add styles
Join my journey in real-time on