Unhandled rejection using setState in .map loop

I am trying to setState within a loop but receiving Unhandled Rejection (TypeError): Cannot read property 'state' of undefined as an error.

setState

Unhandled Rejection (TypeError): Cannot read property 'state' of undefined

The loop contains API data that is contained within another state and within this loop I am trying to setState using onClick= {() => this.setState({clicked: !this.state.clicked})} to change the className of an div as className={this.state.clicked ? 'closed' : 'open'}.

state

setState

onClick= {() => this.setState({clicked: !this.state.clicked})}

className

div

className={this.state.clicked ? 'closed' : 'open'}

I have never come across this issue before but granted I haven't used within a loop before either.

Here is a stripped example of the code

class Rates extends Component {
constructor(props) {
super(props);
this.state = {
dailyRatesDates: ,
clicked: true,
}
}
componentDidMount(){
... //calling API data and passing as setState to dailyRatesDates
}

render() {
return (
<span>
{this.state.dailyRatesDates.length > 0 &&
<WrapperMobile>
{this.state.dailyRatesDates.map(function(i,index){
return(
<div key={index}>
{i.rate_plans.map(function(j,index){
return(
<div key={index} className="expander">
<h2 onClick= {() => this.setState({clicked: !this.state.clicked})}>
<p>{j.name}</p>
</h2>
<div className={`expander__content ${this.state.clicked ? 'closed' : 'open'}`}>
...
</div>
</div>
)
})}
</div>
)
})}
</WrapperMobile>
</div>
}
</span>
);
}
}


If you need to see more then let me know but this should give basis to what I am trying to achieve and further more the issue that ${this.state.clicked ? 'closed' : 'open'} causing in this scenario.

${this.state.clicked ? 'closed' : 'open'}

clicked

setState

.map(function(...) {

.map((...) => {

this

1 Answer
1

These two lines

this.state.dailyRatesDates.map(function(i,index){
i.rate_plans.map(function(j,index){


could result 'this' to be 'undefined'.

Changing to Arrow functions

this.state.dailyRatesDates.map((i,index) => {
i.rate_plans.map((j,index) => {


preserves this from the enclosing context.

this

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.