There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
You can also find further discussion and get answers to your questions over in Language Help.
Agree with a comment or answer? Like () to up-vote the contribution!
Really disappointed how this course has progressed. It started off great and quickly went downhill. Went from explaining things to just throwing stuff on the wall and good luck from 0-60.
what helped me the most was taking some time to practice state with classes first. using setState for initialize classes before I started learning about the hooks. it does make it easier to understand how everything is happening. just go take some time to play with it in a code editor. make a few react components, practice diffrent examples and read through each line of your code and explain to yourself what each one does so you have that indepth understanding of what everything is doing.
WHat grinds me gears about this exersize isnt the material but I did the first question. passed it. then the second step wouldnt pass for no reason. I even checked the view answer, everything was identical. NOTHING was diffrent and it still wouldnt pass the step. I literally copy and pasted all the code and it still wouldnt pass it. the only way it would pass is if I clicked the replace code button. so stupid. the components were working and everything like they should. Has anyone else had this issue? everything was working great except it wouldnt let me pass the step. laaaaaammeee… im guessing it was set so senstive on this challenge that if you didnt have a space in the right place it still wasnt going to let you pass it…idk…just really frustrating.
Did the same thing happen to you? Yeah that kind of stuff seems to be typical with codecademy. Or even if you follow the developer video during a project to the T there’s errors or extras you have to add in.
Yes, amongst other things leading up to this. I’ve posted about this in other places with other lessons. But the point was that it was hard enough to learn how to get this right without dealing with other issues.
I just moved on. Sometimes things happen here an its best to just move on. Revisit it another time when they update it. Most courses this is OK to do unless its Ruby. That one is so bad it just needs to be deleted.
on line 3, where does {questions} come from, i.e. what does it refer to ?
on line 10 ( const onLastQuestion = questionIndex === questions.length - 1;) what am I seeing here?
it’s a conditional, but without if/else or ternary operators? I’m a bit lost…
Hi marty.
You can find the the explanation in the course “Learn JavaScript”/“Functions”/“Concise Body Arrow Function”.
For anonymous functions with one argument/parameter, it is optional to put the parameter inside parentheses.
You can find the array “questions” in dataModel.js. It is being imported in App.js.
It is a conditional expression. Please find other examples in the course Learning JavaScript/Conditionals/Conditional Statements/Comparison Operators.
Here you can find an additional explanation: JavaScript Expressions and Statements
This code, behaves as I would expect it to, but for some reason, it does not pass the checkbox test. I have scoured it for typos and mistakes but can’t seem to find any. If anyone can spot any errors, I’d really appreciate it.
Thanks
Michael
import React, { useState } from 'react';
export default function QuizNavBar({ questions }) {
const [questionIndex, setQuestionIndex] = useState(0);
// define event handlers
const goBack = () => {
setQuestionIndex(prevQuestionIndex =>
prevQuestionIndex - 1);
}
// determine if on the first question or not
const goToNext = () => {
setQuestionIndex(prevQuestionIndex =>
prevQuestionIndex + 1);
}
const onLastQuestion =
questionIndex === questions.length - 1;
const onFirstQuestion =
questionIndex === 0;
return (
<nav>
<span>Question #{questionIndex + 1}</span>
<div>
<button
onClick={goBack}
disabled={onFirstQuestion}>
Go Back
</button>
<button
onClick={goToNext}
disabled={onLastQuestion}>
Next Question
</button>
</div>
</nav>
);
}
I was 100% correct and It was still giving me an error, the only way to pass from step 1 to 2 was to click one the REPLACE my code with theirs, I don’t know who’s writing the test for the hooks part, But it’s MAD finicky…
I understand hooks, I’ve read React explained by Zac Gordon and I’m coming from Thinkful bootcamp, I understand that do to testing this happens but man was it annoying.
I would suggest to anyone struggling with this, don’t let it get you down, so far codeCademy has done an awesome job, I’m sure there are few instances of cases like this throughout their courses, but don’t let it define your learning, keep on coding!
To be honest, if you’re working to be a dev you’re in the right place. Trouble shoot, ask for help, seek out other methods of making something work. Sometimes think don’t work, even when you know it’s right, that’s just life. de-bug, and continue. Happy coding!
@codetut Thank you for the video, that does explain one thing (“questions” is defined in another file that you can only find by clicking the little file folder icon to the left of QuizNavBar.js - it’s in the dataModel.js file which is hidden in there)
However, I still don’t understand where the parameter prevQuestionIndex is initially defined… unless setter functions have some kind of built-in parameter referencing the current state, but the lesson did not go over that.
If I’m not mistaken, the confusion around prevQuestionIndex arises because we’ve forgot some JavaScript syntax along the way. This may easily happen, because, to be honest, sometimes Codecademy really knows how to shake us a little bit
Check Arrow function expressions , especially pay attention to the section where arrow expressions for named functions are described:
And finally, for named functions we treat arrow expressions like variables
// Traditional Function
function bob (a){
return a + 100;
}
// Arrow Function
let bob = a => a + 100;
Hi, I’d also like some clarification on how prevQuestionIndex is initially defined. I can’t quite see its connection to the state, but is there some automatic connection I’m just missing?
From the Hooks cheatsheet:
“…pass a function to the state setter. This function accepts the previous value as an argument and returns an updated value.”
Does this mean that any argument used in a state setter function automatically represents the previous state value?
) below.
) to up-vote the contribution!