Les 2: State
Les 2: State
Deze oefeningenreeks bouwt verder op de oplossingen van de vorige oefeningenreeks. Je kan verder werken van je eigen oplossingen of gebruik maken van de op Canvas gepubliceerde oplossingen. Maak net zoals in de vorige les voor elke oefening een nieuwe component aan. Tijdens deze oefeningenreeks oefen je op
- De concepten van les 1
- State
- de useState hook
- Lifting state & prop-drilling
Key toevoegen
Je hebt vorige oefeningenreeks in de eerste, tweede en vierde oefening gebruik gemaakt van array. Je hebt daar toen geen key aan meegegeven, als je in de console kijkt zal je hier dan ook waarschuwingen over zien.
De componenten die in de arrays zitten gaan nooit van structuur veranderen, elk rij in de maaltafel zal steeds dezelfde waarde bevatten (), gebruik de getallen in de maaltafel () als key. De rater heeft steeds exact evenveel sterren, deze sterren staan steeds in dezelfde volgorde, hier kan je dus een oplopende index gebruiken als key. Voor de vierde opgave kan je ook een eenvoudige key gebruiken, het getal dat in het vakje weergegeven wordt en het rijnummer.
Oefening 6: Calculator
Download het startbestand exerciseSix.jsx en plaats het in je project. Zorg er voor dat je bij het starten van het project het onderstaande te zien krijgt (de andere oefeningen zijn weggelaten in het screenshot);
Bouw de rekenmachine verder uit, hou er rekening mee dat elke druk op de knop zichtbaar moet zijn op het scherm. Je zal dus gebruik moeten maken van state.
Onderstaande array bevat alle knoppen die in de rekenmachine moeten verschijnen, in de juiste volgorde. Gebruik deze array om de 12 knoppen te renderen. Zorg er vervolgens voor dat de knoppen werken en de aangedrukte knoppen ook zichtbaar worden op het label. De "C" knop maakt het volledige scherm leeg en de "Del" knop verwijder het laatst ingedrukte cijfer.
const buttons = ['7', '8', '9', '4', '5', '6', '1', '2', '3', 'C', '0', 'Del'];
Oefening 7: BMI Calculator
Download de startbestanden exerciseSeven.jsx en range.css en plaats deze in je project. Gebruik deze startcode om onderstaand resultaat te bekomen (de andere oefeningen zijn weggelaten in het screenshot).
Bouw een component Slider, deze heeft drie properties, value, min en max. Value geeft de huidige waarde van de slider, min de minimale en max de maximale waarde. De Slider is een invoerelement van het type range als je hiermee niet bekend bent kan je op https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range meer info vinden. Gebruik deze component en de BmiLabel component die in de startbestanden aanwezig is nu om het volgende te realiseren. Kies zelf realistische minimum en maximum waarden.
Zorg er tenslotte voor dat de sliders automatisch updaten. Telkens de hoogte of het gewicht aangepast wordt moet ook de BMI aangepast worden. De formule om de BMI te berekenen vindt je ook in het startbestand.
Oefening 8: Comments en lifting state
Breid oefening 5 van vorige les uit zodat de commentaar (CommentContent) maar voor een stuk zichtbaar is. Voeg daarachter een klikbare tekst 'read more' toe die de volledige tekst toont wanneer erop geklikt wordt. Als de tekst toegeklapt is, worden slechts de 30 eerste karakters getoond.
Zorg ervoor dat de commentaar maar voor 1 CommentCard tegelijkertijd uitgeklapt kan zijn. Je kan gebruik maken van volgende opmaak voor de 'read more'/'show less' tekst:
{
font-size: 110%;
text-decoration: underline;
color: #6b6b6f;
cursor: pointer;
margin: 0;
}
Oefening 9: Exercise uitbreiden
Breid de Exercise component uit zodat deze individueel open of dichtgeklapt kunnen worden, maar ook allemaal tegelijk op open of dicht gezet kunnen worden.
Begin met knop toe te voegen aan de Exercise component. Deze knop krijgt onderstaande opmaak en doet voorlopig nog niets.
const ChevronBtn = styled.button`
font-family: "Lucida Sans", Monaco, monospace;
font-size: 3rem;
letter-spacing: 3px;
color: #3A5D9B;
font-weight: 300;
font-style: oblique;
line-height: 1.2;
background: none;
border: none;
&:hover {
cursor: pointer;
}
`
Afhankelijk van de open/gesloten state, wordt de inhoud van de knop anders opgevuld.
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faChevronDown, faChevronUp} from '@fortawesome/free-solid-svg-icons'
const openBtn = <FontAwesomeIcon icon={faChevronUp}/>
const closedBtn = <FontAwesomeIcon icon={faChevronDown}/>
Voeg vervolgens bovenaan de pagina volgende twee knoppen toe, de eerst knop zal gebruikt worden om alle oefeningen dicht te klappen, de volgende om alle oefeningen open te klappen. Je volgende component gebruiken om de knoppen te bouwen. De knoppen moeten nog niet werken.
const OpenCloseBtn = styled.div`
box-shadow: 7px 2px 8px 1px rgba(18,89,46,0.67);
background: #3a5d9b;
color: #f5f5f5;
height: 3em;
margin: .5em .5em;
display: flex;
align-items: center;
justify-content: center;
&:hover {
&:hover {
cursor: pointer;
}
&:active {
box-shadow: 7px 2px 8px 1px #eeeeee;
}
`
Zorg er tenslotte voor dat alle knoppen die je hierboven toegevoegd hebt werken. Als je de pagina opent is alles standaard geopend. Hou rekening met volgende hints:
- Denk voor je begint met het implementeren goed na over de locatie van de state.
- Weet dat hooks zoals useState enkel in een component gebruikt kunnen worden.
- Arrays kunnen in de state bewaard worden
- Elk element in de array moet gekopieerd worden naar een nieuwe array bij het aanpassen van de state.