Mountain View

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

Linkedin