Get next Item in a array using React

Question

I have an array of objects like this

const Guide = [
        {
            id: 1,
            title: 'Dashboard',
            content: 'The dashboard is your main homepage. It will display a feed of looks...'
        },
        {
            id: 2,
            title: 'Discover',
            content: 'Discover allows you to find new looks, what is trending and search for looks, brands and users'
        },
        {
            id: 3,
            title: "Upload you look, style guide and more "
        },
        {
            id: 4,
            title: "Upload you look, style guide and more "
        },
        {
            id: 5,
            title: "Upload you look, style guide and more "
        }
    ]

I want to be able to click a button and go to the display the data of the next object up to the last one. Currently when I click the button it just changes to the second object "Discover" and stops there, how can I ensure that it goes through with this functionality. Please excuse my grammar.

This is my state when the component mounts

           componentWillMount(){
            this.setState({
                index: Guide[0]
            })
        }

The initial state index is = 0, And this is my function to go to the next object

moveNext = () => {

   let i = Guide.indexOf(Guide[0])

   if(i >= 0 && i < Guide.length)
          this.setState({
             index: Guide[i + 1]
          })
    }

Hana Alaydrus · Accepted Answer · 2017-07-19 11:00:01Z

8

Change this

moveNext = () => {

   let i = Guide.indexOf(Guide[0])

   if(i >= 0 && i < Guide.length)
          this.setState({
             index: Guide[i + 1]
          })
    }

To this

moveNext = () => {

   let i = Guide.indexOf(this.state.index)

   if(i >= 0 && i < Guide.length)
          this.setState({
             index: Guide[i + 1]
          })
    }

Explanation:

This let i = Guide.indexOf(Guide[0]) makes you keep setting the i value to 0, thats why when you click next you keep getting the second data.

By change it to this let i = Guide.indexOf(this.state.index) you will set the i value to the current index, not 0.

I hope my explanation is understandable :)

edited Jul 19, 2017 at 11:00

answered Jul 19, 2017 at 10:51

Hana Alaydrus

2,22018 silver badges20 bronze badges

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

1 Comment

Dumisani Over a year ago

Thank you @Hana, it makes much sense

Tom Fenech · Accepted Answer · 2019-01-02 08:40:37Z

3

Your state should contain the minimal information required, which in this case is the index of the item in the array. You could also use the id, but that would require extra work and it looks like they map directly onto the indices anyway.

const info = [{
    title: 'Dashboard',
    content: 'The dashboard is your main homepage. It will display a feed of looks...'
  },
  {
    title: 'Discover',
    content: 'Discover allows you to find new looks, what is trending and search for looks, brands and users'
  },
  {
    title: "Upload you look, style guide and more "
  }
];

class Guide extends React.Component {
  constructor() {
    super();
    this.state = {
      index: 0
    };    
  }
  
  goToNext = () => {
    this.setState({ index: (this.state.index + 1) % info.length });
  };
  
  render() {
    const item = info[this.state.index];
    return (<div>
      <h2>{item.title}</h2>
      <p>{item.content}</p>
      <button onClick={this.goToNext}>next</button>
    </div>);
  }
}

ReactDOM.render(<Guide/>, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

edited Jan 2, 2019 at 8:40

answered Jul 19, 2017 at 12:24

Tom Fenech

75.1k13 gold badges119 silver badges154 bronze badges

1 Comment

Dumisani Over a year ago

Thank you for the response @Tom, this approach is actually simpler than what I had

dejakob · Accepted Answer · 2017-07-19 10:53:55Z

0

I'm not sure what you're trying to do with "let i = Guide.indexOf(Guide[0])". Try incrementing the index of the state by 1, like this:

componentWillMount() {
   this.state = { index: 0 };
}

moveNext = () => {

   let i = this.state.index;

   if(i >= 0 && i < Guide.length) {
          this.setState({
             index: i + 1
          });

    }
}

In the render method, use Guide[this.state.index] to get the data of the current index.

answered Jul 19, 2017 at 10:53

dejakob

2,11215 silver badges22 bronze badges

Collectives™ on Stack Overflow

Get next Item in a array using React

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related