See updated post below!
I am building an accordion but I have an issue, basically, when a user clicks an accordion, it will drop down and show content, the usual stuff but I am getting this error:
TypeError: Cannot read property ‘activeAcc’ of undefined
I have this issue but cannot see what I am actually doing wrong here:
There is a lot of code:
import React, { Component } from 'react';
import axios from 'axios';
import Icon from '../Icon/Icon';
class RestInfo extends Component {
constructor() {
super();
this.toggle = this.toggle.bind(this);
this.state = {
disruptions: [],
activeAcc: false
};
}
componentDidMount() {
axios
.get('https://trasnport-api-isruptions-v2.azure-api.net/Disruption/v2/', {
headers: {
'Ocp-Apim-Subscription-Key': '55060e2bfbf743c5829b9eef583506f7'
}
})
.then(response => {
this.setState({
disruptions: response.data.disruptions
});
});
}
toggle() {
this.setState(prevState => {
return {
activeAcc: !prevState.activeAcc
};
});
console.log('This should be clicked.');
}
render() {
const { disruptions, newClass } = this.state;
const activeClass = newClass.activeAcc ? 'active' : 'inactive';
return (
<div>
{disruptions.length > 0 ? (
disruptions.map(post => {
return (
<div key={post.id}>
<div className="wmnds-accordion wmnds-is--open">
<div className={`myClass1 myClass2 ${activeClass}`}>Hello World</div>
<button
type="button"
aria-controls="accordion-custom-01"
className="wmnds-accordion__summary-wrapper"
aria-expanded="true"
onClick={this.toggle}
>
<div className="wmnds-accordion__summary">
<div className="wmnds-grid wmnds-grid--align-center">
<span className="wmnds-disruption-indicator-small wmnds-col-auto wmnds-m-r-md">
<svg className="wmnds-disruption-indicator-small__icon">
<Icon iconName="modes-isolated-bus" iconClass="modes-isolated-bus" />
</svg>
<svg className="wmnds-disruption-indicator-small__icon">
<Icon iconName="general-warning-circle" iconClass="general-warning-circle" />
</svg>
</span>
<div className="wmnds-col-auto">
<strong>{post.title}</strong>
</div>
</div>
</div>
<svg className="wmnds-accordion__icon">
<Icon iconName="general-expand" iconClass="general-expand" />
</svg>
<svg className="wmnds-accordion__icon wmnds-accordion__icon--minimise">
<Icon iconName="general-minimise" iconClass="general-minimise" />
</svg>
</button>
<div className="wmnds-accordion__content" id="accordion-custom-01">
<h4 className="serviceAffected">Affected Service(s) </h4>
{post.servicesAffected.map(affected => (
<div key={affected.id}>
<span className="wmnds-disruption-indicator-small wmnds-col-auto wmnds-m-r-md">
<svg className="wmnds-disruption-indicator-small__icon">
<Icon iconName="modes-isolated-bus" iconClass="modes-isolated-bus">
{affected.serviceNumber}
</Icon>
</svg>
<svg className="wmnds-disruption-indicator-small__icon">
<Icon iconName="general-warning-circle" iconClass="general-warning-circle" />
</svg>
</span>
<h5>routeDesc:</h5>
{affected.routeDesc}
<h5>serviceNumber:</h5>
{affected.serviceNumber}
<h5>direction</h5>
{affected.direction}
</div>
))}
<p>{post.title}</p>
<p>{post.description}</p>
<p>{post.disruptionSeverity}</p>
<p>{post.mode}</p>
<p>{post.disruptionSeverity}</p>
</div>
</div>
</div>
);
})
) : (
<div>
<div className="wmnds-loader" />
</div>
)}
</div>
);
}
}
export default RestInfo;
Where am I going wrong here? Thanks in advance for all help 
I’ve been using this accordion as a guide:
Thank you folks in advance!!