CODEWITHSUNDEEP
reactjslistviewreact-native
user2354898
user2354898

Reputation: 262

React Native ListView Filtering

I'm using React-native and I have an issue that I can't solve.

I have a list(ListView) with x elements and the user is able to filter this list on different dates. When the user chooses dates I filter the list and call this.setState() from an onClick in render.

This gives me: "Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount."

I get this because I have a button in the render method that call setState.

I tried with componentWillMount, componentWillUpdate, componentDidUpdate but it doesn't work.

<Accordion
  sections={this.state.uniqueAvailableTimeSlots}
  renderHeader={this.renderAccordionHeader}
  renderContent={this.renderAccordionBody}
  onChange={this.onChange()}
/>

//OnChange will be called when a filter is choosen
//I filter a list and put it in filteredTimeSlots
onChange = () => {
  const filteredTimeSlots = this.state.availableTimeSlots.filter((timeSlot) => {
    return timeSlot.timeSlot.includes(this.state.uniqueAvailableTimeSlots[index]);
  });
  //I set the state for the new list
  this.setState({
    availableTimeSlotsFiltered: this.state.availableTimeSlotsFiltered.cloneWithRows(filteredTimeSlots)
  });

}

Upvotes: 0

Views: 378

Answers (1)

parker
parker

Reputation: 3979

Your error is here onChange={this.onChange()}

It should be onChange={ this.onChange }

You are calling the function in the props, therefore the Warning message.

Upvotes: 0

Related Questions