Push array returning empty in React

Question

I would like to push value in topicsVisited array if this condition is true if (totalPagesInSelectedTopic == this.state.topicPageNo + 1) { and assign it value to the state. However in the console.log(this.state.topicsVisited); its returning empty array.

import {React, ReactDOM} from '../../../../build/react';

import SelectedTopicPageMarkup from './selected-topic-page-markup.jsx';
import NextPrevBtn from './next-prev-btn.jsx';

export default class SelectedTopicPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      topicPageNo: 0,
      total_selected_topic_pages: 1,
      topicsVisited: []
    };
  };
  navigateBack(topicPageNo) {
    if (this.state.topicPageNo > 0) {
      topicPageNo = this.state.topicPageNo - 1;
    } else {
      topicPageNo = 0;
    }
    this.setState({topicPageNo: topicPageNo});
  };
  navigateNext(totalPagesInSelectedTopic) {
    let topicPageNo;
    if (totalPagesInSelectedTopic > this.state.topicPageNo + 1) {
      topicPageNo = this.state.topicPageNo + 1;
    } else if (totalPagesInSelectedTopic == this.state.topicPageNo + 1) {
      this.props.setTopicClicked(false);

      let topicsVisited = this.state.topicsVisited;
      topicsVisited.push(this.props.topicsID);
      this.setState({topicsVisited: topicsVisited});
    } else {
      topicPageNo = this.state.topicPageNo;
    }
    this.setState({topicPageNo: topicPageNo});
  };
  render() {
    let topicsID = this.props.topicsID;
    let topicPageNo = this.state.topicPageNo;
    console.log(this.state.topicsVisited);
    return (
      <div>
        {this.props.topicPageData.filter(function(topicPage) {
          // if condition is true, item is not filtered out
          return topicPage.topic_no === topicsID;
        }).map(function(topicPage) {
          let totalPagesInSelectedTopic = topicPage.topic_pages.length;
          return (
            <div>
              <div>
                <SelectedTopicPageMarkup headline={topicPage.topic_pages[0].headline} key={topicPage.topic_no}>
                  {topicPage.topic_pages[topicPageNo].description}
                </SelectedTopicPageMarkup>
              </div>
              <div>
                <NextPrevBtn moveNext={this.navigateNext.bind(this, totalPagesInSelectedTopic)} key={topicPage.topic_no} moveBack={this.navigateBack.bind(this, topicPageNo)}/>
              </div>
            </div>
          );
        }.bind(this))}
      </div>
    );
  };
};

The Reason · Accepted Answer · 2016-02-11 10:49:06Z

1

I've created a simple exmaple for you.

increment(){
    let newCount = this.state.count + 1,
        right = this.state.rightElements,
        left = this.state.leftElements;
    newCount % 2 === 0 ? right.push(newCount) : left.push(newCount)

    this.setState({
      count: newCount,
      rightElements: right,
      leftElements: left,
    });
  }

The whole worked example you can find here

Thanks.

answered Feb 11, 2016 at 10:49

The Reason

8,0135 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rahul Dagli Over a year ago

Thanks, I had actually tried it with simple example earlier and it worked properly. However, for some reason it not working in my case.

The Reason Over a year ago

@RahulDagli could you create fiddle example?

Rahul Dagli Over a year ago

I've been able to figure out the root cause. Since i'm unmounting SelectedTopicPage component from its parent component, when it reaches end of that topic page the state resets to its initial state.

Collectives™ on Stack Overflow

Push array returning empty in React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related