React - Make an FAQ class toggle on click - reactjs

Question

I am creating an FAQ with React and I have the questions in strong tags and the answers in p tags. On click of the strong tags I would like to add a class of active to the clicked tag. I am close but there is some sort of scope issue on my toggle function and I'm not sure how to move past it:
import React, { Component } from "react";
import "./faq.css";
class Questions extends Component {
constructor(props) {
super(props);
this.state = {
active: false
};
}
toggleClass() {
const currentState = this.state.active;
this.setState({ active: !currentState });
}
render() {
let faq = [
{
question: "Lorem",
answer: "Ipsum"
},
{
question: "Dolor",
answer: "Sit"
}
];
return (
<div className="questions">
{faq.map((item, index) => {
return (
<div className="item">
<strong
className={this.state.active ? "active" : null}
onClick={this.toggleClass}
>
{item.question}
</strong>
<p>{item.answer}</p>
</div>
);
})}
</div>
);
}
}
export default Questions;
Here's what I have so far

Answer 1

You need to bind toogleClass method to the Questions instance:
Opition one: Using bind
import React, { Component } from "react";
import "./faq.css";
class Questions extends Component {
constructor(props) {
super(props);
this.state = {
active: false
};
this.toggleClass.bind(this)
}
toggleClass() {
const currentState = this.state.active;
this.setState({ active: !currentState });
}
render() {
let faq = [
{
question: "Lorem",
answer: "Ipsum"
},
{
question: "Dolor",
answer: "Sit"
}
];
return (
<div className="questions">
{faq.map((item, index) => {
return (
<div className="item">
<strong
className={this.state.active ? "active" : null}
onClick={this.toggleClass}
>
{item.question}
</strong>
<p>{item.answer}</p>
</div>
);
})}
</div>
);
}
}
export default Questions;
Option 2: Using class property initializer
import React, { Component } from "react";
import "./faq.css";
class Questions extends Component {
constructor(props) {
super(props);
this.state = {
active: false
};
this.toggleClass.bind(this)
}
toggleClass = () => {
const currentState = this.state.active;
this.setState({ active: !currentState });
}
render() {
let faq = [
{
question: "Lorem",
answer: "Ipsum"
},
{
question: "Dolor",
answer: "Sit"
}
];
return (
<div className="questions">
{faq.map((item, index) => {
return (
<div className="item">
<strong
className={this.state.active ? "active" : null}
onClick={this.toggleClass}
>
{item.question}
</strong>
<p>{item.answer}</p>
</div>
);
})}
</div>
);
}
}
export default Questions;
To selected only the active question you can do this:
import React, { Component } from "react";
import "./faq.css";
class Questions extends Component {
constructor(props) {
super(props);
this.state = {
activeQuestion: null
};
}
render() {
let faq = [
{
question: "Lorem",
answer: "Ipsum"
},
{
question: "Dolor",
answer: "Sit"
}
];
return (
<div className="questions">
{faq.map((item, index) => {
return (
<div className="item">
<strong
data-question={item.question}
className={
item.question === this.state.activeQuestion ? "active" : null
}
onClick={() => {
console.log(item.question);
this.setState({ activeQuestion: item.question });
}}
>
{item.question}
</strong>
<p>{item.answer}</p>
</div>
);
})}
</div>
);
}
}
export default Questions;

Answer 2

Your function toggleClass needs to be an arrow function -> toggleClass = () => {...your code here...}. When it's a regular function the outer scope (where this.state is), is not being passed to your function. Without an arrow function, when you refer to this you are referring only to the scope of the toggleClass function, where state does not exist and so is undefined.
Working Code
Also due to setState being async, it's best practice to use current state by referencing it within the setState function like below:
toggleClass = () => {
this.setState(prevState => ({
active: !prevState.active
})
}
When you reference state outside of the setState function then pass it in, it's possible that the state would be different by the time you use it to set it.
i.e. say the currentState you got was true, and then your setState uses current state to set the opposite (False) by the time setState tries to set it, something else might have changed your existing state to False already and you are just setting it to False again (instead of modifying what the current state is at that time which would be False and you want want True). Unlikely in your case, but it is good practice to follow this because you might run into this issue elsewhere