Getting hooked
React hook
Jeg har set i tutorials og artikler, at man i React enten bruger class component state, eller hooks i functional component til at opbevare data til en given component. Jeg synes det var rigtig svært at få skovlen under, men ny synes jeg endelig det giver mening.
I det ovenstående billede har jeg defineret 4 forskellige hooks, og hver af dem skal opbevare en eller anden form for data. Disse 4 hooks er placeret i min App component, da den skal være samlingspunkt for al data fra forskellige components. En hook består af den nuværende værdi (f.eks. currentBook), en funktion man kan kalde for at ændre den nuværende værdi (f.eks. setCurrentBook), og den sættes lig med den nuværende tilstand (f.eks. useState("ruth"). Når jeg så vil vide hvad den nuværende bog er, kan jeg bruge currentBook, og når jeg så vil skifte til en anden bog, skal jeg bare kalde setCurrentBook. Men hvad så hvis en hook er afhængig af andre værdier? Det her så her man bruger useEffect(), i useEffect kan man definere en funktion og hvad den er afhængig af. I den første useEffect siger jeg så at der skal laves et kald til API'en, og alt efter den nuværende bog og det nuværende kapitel, skal der hentes en bestemt bibeltekst. Det angives så i [], hvad den er afhængig, og så opdatere React automatisk, når disse værdier ændres. F.eks. bliver text opdateret når currentBook og/eller currentChapter bliver ændret.
Inde i dropdown menuen, hvor brugeren skal vælge bog og kapitel, opbevares så de forskellige bøger man kan vælge imellem, hvilke kapitler, og hvilken bog og hvilket kapitel der læses i lige nu. Jeg rendte ind i rigtig mange problemer med 'undefined', så jeg var nødt til at lave et check i useEffect, da den nuværende bog selvfølgelig er afhængig af hvilke bøger der kan vælges.
Med en HTML-select, kan man så vælge mellem bøger, og når brugeren så skifter bog, sendes der et "onChange" kald, som så sendes til funktionen "onBookChange", som sender et signal tilbage til App.js
