0

I have a table that displays a number of records from a json (dynamically). When you click on the desired row, you get a dialog with actions within it (records count, reject, approve, close dialog, next record, and previous record).

I have pretty much all of it working except the next and prev functionality. I thought a ++ and -- on the rowIndex would fetch the next iteration (this is my angularJS thought process by the way, since I created this already in Angular but we are converting to ReactJS), but obviously, it doesn't work that way.

These are the functions I created, however, you can see a minimalist code snippet in my webpackbin that you can use to play around with it:

//Pull the next item
handleApprovalDialogNext = (rowIndex, openIndex, event) => {
    this.setState(
        {
            openIndex: rowIndex++,
        }, () => {this.setState({ open: true })}
    )
};

//Pull the prev item
handleApprovalDialogPrev = (rowIndex, openIndex, event) => {
    this.setState(
        {
            openIndex: rowIndex--,
        }, () => {this.setState({ open: true })}
    )
};

Here is a link to my webpackbin

p.s. Ideally, if the item is the first one, it shouldn't allow you to go back (perhaps, disabling the arrow icon). Same thing when you reach the end of the data.

Any help would be really appreciated.

LOTUSMS
  • 10,317
  • 15
  • 71
  • 140

1 Answers1

2

You're webpackbin is getting errors and won't load. However, I think you should be adding/subtracting from this.state.openIndex rather than rowIndex. Not sure why you are setting open in the callback. Setstate callback is discouraged in the React docs https://facebook.github.io/react/docs/react-component.html#setstate.

//Pull the next item
handleApprovalDialogNext = (rowIndex, openIndex, event) => {
    this.setState({
        openIndex: this.state.openIndex + 1,
        open: true
    });
};

//Pull the prev item
handleApprovalDialogPrev = (rowIndex, openIndex, event) => {
    this.setState({
        openIndex: this.state.openIndex - 1,
        open: true
    });
};

Also, check out How to uses increment operator in React to know why you should use + 1 rather than ++.

To render the icons conditionally, you just need to check if the current openIndex is the first or last index in the data.

It would look something like this:

<Col className="floating-close layout-column">
    <IconButton>
      <i className="material-icons">close</i>
    </IconButton>
    {this.state.openIndex > 0 &&
    <IconButton>
      <i className="material-icons left">chevron_left</i>
    </IconButton>}
    {this.state.openIndex < approvalsData.length &&
    <IconButton>
      <i className="material-icons right">chevron_right</i>
    </IconButton>}
</Col>
Chase DeAnda
  • 15,963
  • 3
  • 30
  • 41
  • Yup! that worked! And thank you for the explanation and resources. Way better than just providing code. Thanks a lot. The webpackbin is fixed, if you have a minute to help me with the other part that conditionally disables the icon if there are no previous items or if it's the end of the data. If not, it's ok. Thanks anyway – LOTUSMS May 26 '17 at 16:51
  • 1
    just want to add that it's recommended to use the callback version of `setState` and to use the `prevState` argument when new state depends on the current state: `this.setState(prevState => ({ openIndex: prevState.openIndex + 1 }));` – Omer Bokhari May 26 '17 at 16:53
  • 1
    @LOTUSMS Updated answer to include conditional rendering. – Chase DeAnda May 26 '17 at 17:10
  • @ChaseDeAnda Works great, with the exception that the right arrow icon is not going away at the end of data and it throws an error of name of undefined when clicked. I updated the webpackbin. It should be error free – LOTUSMS May 26 '17 at 17:44
  • Looks like you copied the code before I could get my edit in there lol You should change `this.state.openIndex <= approvalsData.length` to this.state.openIndex < approvalsData.length`. Remove the or equals to operator. – Chase DeAnda May 26 '17 at 19:11
  • @ChaseDeAnda HA! I guess I did. But anyhow, I figured it out. It should check for `this.state.openIndex < approvalsData.length-1` and I also ended up using a conditional rendering for disabled icons instead of removing the icon altogether. I updated my webpackbin if you want to check it out – LOTUSMS May 26 '17 at 22:37