Need Help With Quizzical

React
1

Hello! I am working on Quizzical and I have 2 bugs: 1) my isSelected function returns an array of ids, not the id for the specific answer that was clicked (I want the unique id so I can identify the answer that was selected by the user later) and 2) it may be a system bug but even when I have isSelected set to false, the background color for the answers is purple… I have made comments where I am having the problems–any help would be much appreciated!

2

Hey @uconnwbball,

Some possible issues that I think might be the cause:

The main issue with the isSelected function is that you’re mapping over all the answers when calling handleClick, which returns an array of IDs. What you need is to pass the ID of the specific answer that was clicked, not the entire array of answers. You should modify your handleClick function to pass the specific answer ID when clicked.

Play around with this code:

handleClick = {(id) => isSelected(id)}

then in the quiz answers:

{item.answers.map(answerInArray => (
    <button
        key={answerInArray.id}
        onClick={() => handleClick(answerInArray.id)}
        className={answerInArray.isSelected ? "selected" : ""}
    >
        {answerInArray.answer}
    </button>
))}

Regarding the background colour - I just think you’re not properly updating the isSelected state for each answer when an answer is clicked, which is why the background color isn’t updating. Try and update the isSelected state when an answer is clicked.

Add a new state to track the selected answers:
const [selectedAnswers, setSelectedAnswers] = React.useState({});

Then, modify your isSelected function to update the isSelected state for the clicked answer:

function isSelected(id) {
    setSelectedAnswers(prevSelected => ({
        ...prevSelected,
        [id]: !prevSelected[id] // Toggle isSelected for this specific answer ID
    }));
}

In your Quiz component, check if the answer is selected based on this selectedAnswers state:

{item.answers.map(answerInArray => (
    <button
        key={answerInArray.id}
        onClick={() => handleClick(answerInArray.id)}
        className={selectedAnswers[answerInArray.id] ? "selected" : ""}
    >
        {answerInArray.answer}
    </button>
))}
3

Hi @roku! I messed with it for a while and still don’t understand how to pass the id of the selected answer when I click an answer button :frowning: I looked at the Tenzies lesson Hold dice part 1 and I can isolate the ids there no problem–I think because of how embedded the answers are in the data here, I don’t know how to not map to isolate the ids, but like you said, that is also the problem because it just gives me back an array of ids.

4

Sorry for the delay! Tagging @Tom_Chant to poke and see if he has some insight on it.

5

Hey just had a quick look at this. In line 5 of Quiz.js you are declaring a const to hold some styles. Where are those styles then used?

6

Hi @Tom_Chant! I just deleted the styles const on line 5–the styles for if an answer’s isSelected property = true will be added in Quis.js at line 15, however, I cannot figure out how to get just the id of the answer I clicked–when I click an answer I am just getting the array of ids. Once I have the unique id, I can then work on trying to flip the isSelected property for only that answer to true and apply the classes for isSelected to only that answer.

1 Like
7

Hey!
If I understand you correctly, on line 14 of Quiz.js, you are calling handle click and passing in the id as an argument:

onClick={() => props.handleClick(answerInArray.id)}

But in handleClick in App.js you are not taking in any params. I didn’t quite get what you were trying to do with the logic in the handleClick function. But when I deleted it and took in a param and logged it out, I got the id of the selected answer.

handleClick = { (id) => console.log(id) }
// For e.g. 42dbff8b-fc98-4a93-ba2f-1015cdc56f83 is logged

Does that help?

8

Yes! That isolated the id! Thank you! I want to use the unique id to flip the isSelected property for any answer that is selected–however, the logic I currently have in the isSelected function, does not work. I believe it is because mapping over “prevData” does not map over the “answers” array for each section, it instead maps over all the data. I tried to do a “double map” in the isSelected function but that didn’t work–any hints on how I can just map over the previous values of the “answers” array and not map over the previous values of all the data? Thank you so much as always!